Question

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

通常情况下，如果我必须使用背景调整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。

Answer 2

为什么不使用计算功能。

width: calc(100% + 20px);

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

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

使用position：absolute来设置图像大小

2 个答案: