时间戳

首页 > 解决方案 > Foundation6：在嵌套列中展开图像

image - Foundation6：在嵌套列中展开图像

问题描述

我想扩展图像，使图像的宽度为 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/

标签： imagezurb-foundation

解决方案

这行得通。我知道这很痛苦，因为你必须做两行，中间有全宽的 div。但是没有排水沟边缘。像这样：

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

推荐阅读