为什么在某些浏览器中img width的结果不同？谁是正确的？

Question

有一个演示：

<div style="position:absolute;">
   <img
      src="https://i.imgur.com/iQ2rVup.jpg"
      style="width:100%;height:100px;"
   />
</div>

On Codepen

Chrome结果：

Firefox / IE结果：

我看到了W3C文档。
绝对定位的非位移元素的计算如下。

min(max(preferred minimum width, available width), preferred width)  

https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width

chrome的结果是否错误？

Answer 1

^{这可能不会回答问题，但我将尝试解释chrome发生了什么以及为什么两者都正确。}

首先，您应该注意，即使您约束inline-block元素或float也是因为它们也是缩小到适合的元素，也会发生同样的情况

<div style="display:inline-block;">
   <img
      src="https://i.imgur.com/iQ2rVup.jpg"
      style="width:100%;height:100px;"
   />
</div>
<br>
<div style="float:left;">
   <img
      src="https://i.imgur.com/iQ2rVup.jpg"
      style="width:100%;height:100px;"
   />
</div>

现在，所有内容都与width:100%有关。由于它是一个百分比值，因此参考将是包含块的宽度，但是我们的包含块是一个缩小以适合的元素，这意味着其宽度取决于其内容。在这里，我们有一个循环。

这是the specification中描述这种行为的部分：

  

有时，一个百分比大小的盒子包含的块的大小取决于盒子本身的内在大小贡献，从而产生循环依赖性。在计算包含块的大小时，百分比的作用类似于自动。然后，除非另有说明，否则在计算包含块内容的使用大小和位置时：...

因此，基本上，我们认为图像的宽度为auto，我们计算div（父元素）的宽度，然后在该计算出的宽度上再次使用width:100%

差异来了。 Firefox在计算中考虑设置图像的高度，以找到图像的宽度值（如the specification的本部分所述）。现在我们有了图像的 new 宽度，父元素将缩小以适应该宽度，然后我们将根据先前的宽度重新考虑width:100%。

Chrome将宽度设置为自动，但不考虑高度，在这种情况下，宽度将使用图像的固有尺寸具有以下特征：

<div style="display:inline-block;">
   <img
      src="https://i.imgur.com/iQ2rVup.jpg"
      style="/*width:100%;height:100px;*/"
   />
</div>

现在我们有了 new 的宽度，我们可以计算父元素的宽度（缩小以适合），现在如果我们将width:100%;height:100px设置为我们拥有的图像100px表示高度，100%表示包含的块宽度，即初始图像宽度。

---

现在的问题是：当将此图像视为auto时，是否应该考虑高度以计算图像的 new 宽度值，以便计算包含的宽度块？如果没有正确的Chrome浏览器，则为正确的Firefox。

---

需要注意的是，在两种情况下，图像都可能失真。在实际示例中，我们不会在Firefox上注意到这一点，因为高度很小。

这是一个动画，用来说明变形并显示两个浏览器之间的不同行为。

img {
 width:100%;
 height:200px;
}

.wrapper {
 border:2px solid;
 animation:change 5s linear infinite alternate;
}

.wrapper > div {
  border:2px solid green;
}

@keyframes change {
  from {
    width:500px;
  }
  to {
    width:100px;
  }

}

<div class="wrapper">
  <div style="display:inline-block;">
    <img src="https://i.imgur.com/iQ2rVup.jpg"  />
  </div>
</div>

此处的wrapper用作我们的“缩小以适合”元素的包含块，它将定义可用宽度。我们可以清楚地看到，在Chrome中，图像总是失真的，而在Firefix中，失真会稍后发生。