绝对定位，负顶部/左/右/底部用于图像拉伸

Question

我刚刚找到纯粹的CSS解决方法来拉伸像background-size:cover这样的图像。 它被Twitter使用，但有点其他形式。

以下是拉伸图像http://jsfiddle.net/zksd1L6a/1/

的示例（不是我的）

在大多数情况下，它工作得很好，我没有必要使用Javascript使我的图像适合div

这是代码

div {
    position: relative;
    background: yellow;
    overflow: hidden;
}
.parent1 {
    width: 500px;
    height: 200px;
}
.parent2 {
    width: 500px;
    height: 300px;
}
img {
    position: absolute;
    left: -9999px;
    right: -9999px;
    top: -9999px;
    bottom: -9999px;
    margin: auto;
    min-width: 100%;
    min-height: 100%;
} 

和html

<h2>Would Work</h2>
<div class="parent1">
    <img src="http://placehold.it/300x150" alt="" class="img1" />
</div>

<h2>Also Works</h2>
<div class="parent2">
    <img src="http://placehold.it/300x150" alt="" class="img2" />
</div>

我的问题是关于否定职位-9999px

有人可以用这种方式解释这项工作及其行为的原因，如果有人从浏览器角度解释它是如何工作的，那将会很棒。

正如我可以猜测的那样做了类似的东西把块顶部放到-9999px而不是把它降到-9999px这导致绝对19998高度（-9999px +（ - 9999px））。为什么图像不会以这种方式拉伸。

请解释一下。

Answer 1

基本上，你所说的正是正在发生的事情。

图片的高度和宽度确实为19998px，但不是设置内容大小，而是为您设置margin。用户代理可以自由猜测其可能的位置。它在The w3 specification

中进行了解释

由于边距相等，图像会自动居中于假设框中。