Html 如何将图像拉伸到其父图像的填充范围内？

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

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

。。。文本

。。。文本

.集装箱{
填充：100px；
}

注:

• 我不知道图像的大小或纵横比。它应该拉伸到全宽，保持其纵横比
• 我事先不知道家长的宽度。父对象拉伸以适应窗口
• 我确实知道家长的想法

我考虑的事情：

• 图像上的负边距，将其“拉”到填充中。但是，它保留其“自然”大小，除非我还设置了

  宽度

  ，并且

  宽度：100%

  不包括父级的填充<代码>宽度：计算（100%+200px）应该可以工作，但浏览器支持不起作用

• 框大小调整在这里是无用的，因为我们关心的是父对象的填充，而不是图像的填充

• position:absolute

  允许我设置

  left:0

  和

  right:0

  以获得正确的宽度。但是，它将图像从流中取出，因此后续文本将消失在其后面
• 删除父元素的填充，并在
  元素上放置左右边距。但是，我还必须对可能出现在内部的所有其他元素执行此操作。我可以用

  .container>*

  来实现这一点，但它感觉很粗糙
• JavaScript。我甚至不想去想它

有没有一个干净的方法来实现这一点？

您可以使用

.container img{
width:100%;
}

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

.container{
填充：100px；
边框：1px实心#000；
}
.img holder{/*不给它宽度属性*/
左边距：-100px；
右边距：-100px；
}
p{
边框：1px实心#f00
}
img{
宽度：100%；
}

。。。文本

。。。文本

您可以填充元素

而不是

.container

支持“全球81%，但如果你不需要真正的老兄弟，那也没关系。只有你才能决定你需要支持哪一个broswer级别。@LuisP.A。看到倒数第二个项目了吗？@Thomas，在倒数第二个项目中你提到了边距，但我说的是填充。。。如果不适合你。。。sorry@LuisP.A. 是的，我明白了，但它也很粗糙。根据父对象的内部宽度，是的。但这不包括填充。很抱歉，在这种情况下，您使用相同的负面边距从双方哦，很简单，谢谢！我做了一个小的编辑以使图像拉伸，但这非常有效：Dglad，它对您有效：），我已将该属性赋予图像，但删除了它，因为我不知道您希望图像的行为。顺便说一句，这是一个很好的问题！