使用 position: absolute 设置图像大小答案

【问题标题】：Use position: absolute to set an image size使用 position: absolute 设置图像大小
【发布时间】：2014-06-02 02:44:01
【问题描述】：

我正在尝试将图像大小设置为其容器大小 + 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;
}

【问题讨论】：

尝试添加属性：display:block;在 div img{}
这不会改变任何东西，因为绝对位置已经改变了格式上下文。
为什么图片需要比容器大？这不合逻辑。
我从事动画重度应用，这是为了实现环境效果。我只是不想在每次屏幕/容器大小更改时手动重新计算图像大小

标签： html css

【解决方案1】：

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

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

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

其中容器的背景图像和内边距为 20px。

【讨论】：

好的，这对我来说已经足够好了。一个更大的额外元素，而图像只是 100% 在其中。
我只是在做这种事情时尽量记住，不要试图让标记/代码花哨，只要让它发生干净。我们越是想出奇特的方法来完成事情，我们看到它们破裂的例子就越多。吻。有时很难记住。

【解决方案2】：

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

width: calc(100% + 20px);

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

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

【讨论】：