Question

这就是我想要实现的目标：

|                           |
|     bla bla text text     |
|     more text and bla     |
+---------------------------+
|IMAGE IMAGE IMAGE IMAGE IMA|
|GE IMAGE IMAGE IMAGE IMAGE |
|IMAGE IMAGE IMAGE IMAGE IMA|
+---------------------------+
|     and the text goes     |
|     on and on and on.     |
|                           |

标记和CSS看起来像：

<div class="container">
  <p>... text ...</p>
  <img>
  <p>... text ...</p>
</div>

.container {
  padding: 100px;
}

注意：

我不知道图像的大小或宽高比。它应该伸展到整个宽度，保持其纵横比。
我事先并不知道父母的宽度。父母伸展以适应窗户。
我做知道父母的填充。

我考虑的事情：

图像上的负边距，将其“拉”到填充中。但是，它保留了“自然”大小，除非我还设置了width，而width: 100%不包含父级的填充。 width: calc(100% + 200px)应该有效，但浏览器支持为only 81%。
box-sizing在这里没用，因为我们关心父母的填充，而不是图像的填充。
position: absolute让我设置left: 0和right: 0以获得正确的宽度。但是，它会将图像从流中移出，因此后续文本会消失在其后面。
删除父级的填充，并在<p>元素上放置左右边距。但是我还必须为可能出现在里面的所有其他元素做到这一点。我可以用.container > *做到这一点，但感觉很讨厌。
的JavaScript。甚至不想考虑它。

有没有一种干净的方法来实现这一目标？

Answer 1

＆＃13;

.container {
  padding: 100px;
  border: 1px solid #000;
}
.img-holder { /* don't give it width property*/
  margin-left: -100px;
  margin-right: -100px;
}
p {
  border: 1px solid #f00
}
img {
  width: 100%;
}

＆＃13;

<div class="container">
  <p>... text ...</p>
  <div class="img-holder">
    <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="">
  </div>
  <p>... text ...</p>
</div>

＆＃13;

您可以根据需要设置图像样式

Answer 2

您可以使用

.container img{
width:100%;
}

它将根据父对象的宽度保持比率。

如何将图像拉伸到其父级的填充内？

2 个答案: