Question

我希望类wide的图像能够覆盖父div的填充。当我给它们带负余量时，它们不会伸展到全宽（max-width:100%保持它们的大小相同）。

#content {
  padding: 20px;
  border: 1px solid red;
}
/* regular images */

#content img {
  max-width: 100%;
}
/* full width images, videos etc */

#content .wide {
  margin-left: -20px;
  margin-right: -20px;
}

<div id="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet non libero eget ornare. Proin commodo tortor risus, vitae malesuada lectus pharetra quis. Aliquam quis elit in erat facilisis pellentesque. Donec ornare ligula eu massa dignissim posuere
    sed eu sapien.</p>

  <!-- this should stretch -->
  <img class="wide" src="http://pic.templetons.com/brad/pano/europe/epidaurus-wide.jpg">

  <p>orci. Proin nec nunc pulvinar, feugiat lorem in, imperdiet ante. Proin interdum quam id congue tincidunt. Praesent pellentesque facilisis dictum. Nulla vel nulla turpis. Fusce mauris elit</p>

  <!-- this one should NOT -->
  <img src="http://pic.templetons.com/brad/pano/europe/epidaurus-wide.jpg">

  <p>orci. Proin nec nunc pulvinar, feugiat lorem in, imperdiet ante. Proin interdum quam id congue tincidunt. Praesent pellentesque facilisis dictum. Nulla vel nulla turpis. Fusce mauris elit, s</p>
</div>

我怎样才能实现它？我希望图像从左到右，没有任何空格。

没有类wide的图像应该正常包含在填充内。

（ps。为所有内容提供保证金，但图像将工作，但这是很多工作，而且不是很优雅）

Answer 1

我建议将标记添加为isherwoord建议，这样可以获得比我的答案更好的浏览器支持。如果无法做到这一点，您可以使用calc功能将负边距添加到100％宽度。浏览器支持甚至不是that bad！

#content {
  padding: 20px;
  border: 1px solid red;
}
/* regular images */

#content img {
  max-width: 100%;
}
/* full width images, videos etc */

#content .wide {
  margin-left: -20px;
  margin-right: -20px;
  max-width: calc(100% + 40px);
}

<div id="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet non libero eget ornare. Proin commodo tortor risus, vitae malesuada lectus pharetra quis. Aliquam quis elit in erat facilisis pellentesque. Donec ornare ligula eu massa dignissim posuere
    sed eu sapien.</p>

  <!-- this should stretch -->
  <img class="wide" src="http://pic.templetons.com/brad/pano/europe/epidaurus-wide.jpg">

  <p>orci. Proin nec nunc pulvinar, feugiat lorem in, imperdiet ante. Proin interdum quam id congue tincidunt. Praesent pellentesque facilisis dictum. Nulla vel nulla turpis. Fusce mauris elit</p>

  <!-- this one should NOT -->
  <img src="http://pic.templetons.com/brad/pano/europe/epidaurus-wide.jpg">

  <p>orci. Proin nec nunc pulvinar, feugiat lorem in, imperdiet ante. Proin interdum quam id congue tincidunt. Praesent pellentesque facilisis dictum. Nulla vel nulla turpis. Fusce mauris elit, s</p>
</div>

Answer 2

不是使用负边距拉伸图像，而是添加容器元素：

＆＃13;

#content {
  padding: 20px;
  border: 1px solid red;
}
/* regular images */

#content img {
  max-width: 100%;
}
/* full width images, videos etc */

#content .wide {
  margin-left: -20px;
  margin-right: -20px;
}

＆＃13;

<div id="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet non libero eget ornare. Proin commodo tortor risus, vitae malesuada lectus pharetra quis. Aliquam quis elit in erat facilisis pellentesque. Donec ornare ligula eu massa dignissim posuere
    sed eu sapien.</p>

  <!-- this should stretch -->
  <div class="wide">
    <img src="http://pic.templetons.com/brad/pano/europe/epidaurus-wide.jpg">
  </div>

  <p>orci. Proin nec nunc pulvinar, feugiat lorem in, imperdiet ante. Proin interdum quam id congue tincidunt. Praesent pellentesque facilisis dictum. Nulla vel nulla turpis. Fusce mauris elit</p>
</div>

＆＃13;

强制图像溢出父div的填充并且是100％宽

2 个答案: