使用position:absolute设置图像大小

Question

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

通常，如果我必须调整带有背景的div的大小，我只会将其设置为position absolute，并使用负positions值，但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的填充。

Answer 2

为什么不直接使用calc函数呢。

width: calc(100% + 20px);

这是小提琴http://jsfiddle.net/7hbq5/14/

Calc函数有很好的支持http://caniuse.com/#search=calc