Foundation6: расширение изображения во вложенном столбце - PullRequest
Новая
       5

Foundation6: расширение изображения во вложенном столбце

0 голосов
/ 02 июня 2018

Я хочу расширить изображение, чтобы оно имело ширину 100% с окном браузера без сточной канавы.Кажется, что добавление строки, расширенной к изображению, не делает работу.Также мне нужно понять это, только редактируя CSS. 

.wideimage{
  min-width: 100vh;
}
<div class="row small-collapse">
  <div class="medium-11 medium-centered column">
    <p class="xlarge-8 xlarge-offset-2 ">m dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id e</p>
    <div class="degutter wideimage"><img src="http://placehold.it/2400x500"></div>
    <p class="xlarge-8 xlarge-offset-2 ">m dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id e</p>
  </div>
</div>

https://jsfiddle.net/sLk0jf4L/835/

1 Ответ

0 голосов
/ 02 июня 2018

Это работает.Я знаю, что это боль, потому что вы должны сделать два ряда, с полной шириной деления между ними.Но нет краев водосточного желоба.Вот так: 

.wideimage{
  width: 100%;
  min-width: 100vh;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.0/foundation.min.css" rel="stylesheet"/>
<div class="row small-collapse">
  <div class="medium-11 medium-centered column">

    <p class="xlarge-8 xlarge-offset-2 ">m dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id e</p>
    
   </div>
</div>

    <div class="degutter wideimage"><img src="http://placehold.it/2400x500"></div>

    <div class="row small-collapse">
  <div class="medium-11 medium-centered column">

    <p class="xlarge-8 xlarge-offset-2 ">m dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id e</p>
    
   </div>
</div>
...