html - 使用位置 : absolute to set an image size

Question

我正在尝试将图像大小设置为其容器大小 + 20 像素。容器大小是相对的，会根据屏幕大小而改变。

通常，如果我必须调整带有背景的 div 的大小，我会将其设置为绝对位置，位置值为负数，但 img 元素似乎不遵循相同的规则。您知道任何解决方案吗？

HTML:

<div>
  <img />
</div>

CSS:

div {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.5%;
}
div img {
  position: absolute;
  top: -20px;
  right: -20px;
  bottom: -20px;
  left: -20px;
}

Answer 1

请记住，绝对定位会将元素从文档流中移除，因此它是容器。如果您希望图像相对于它所在的容器，则位置需要是相对的，添加所需的大小。

从逻辑上考虑这个问题，为什么不在主要内容 div 周围包裹一个额外的 div 并给它一些填充呢？

<div id=container>
  <div id=content>
    some content
  </div>
</div>

其中容器有 bg 图像和 20px 的填充。