Question

我想扩展图像，使图像宽度为100％，浏览器窗口没有装订线。似乎添加行扩展到图像不起作用。另外，我需要通过编辑css来解决这个问题。

＆＃13;

.wideimage{
  min-width: 100vh;
}

＆＃13;

<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>

＆＃13;

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

Answer 1

这很有效。我知道这是一种痛苦，因为你必须做两行，其中宽度为div。但是没有阴沟边缘。像这样：

＆＃13;

.wideimage{
  width: 100%;
  min-width: 100vh;
}

＆＃13;

<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>

＆＃13;

Foundation6：在嵌套列中展开图像

1 个答案: