为什么在某些浏览器中img width的结果不同?谁是正确的? [英] Why are the results of img width different in some browsers? Who is correct?

问题描述

这有一个演示:

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

chrome的结果是否错误?

解决方案

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

首先，即使约束 inline-block 元素或 float ，因为它们也是缩小至适合的元素

，您也应该注意到同样的情况发生

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

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

这是规范的一部分，描述这种行为:

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

因此，基本上，我们认为图像的宽度为 auto ，我们计算 div (父元素)的宽度，然后使用 width:100％再次计算出宽度.

差异来了.Firefox正在考虑在计算中设置图像的高度，以找到图像的宽度值(如

 < div style ="display:inline-block;">< imgsrc ="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 {宽度:100％;高度:200px；}.wrapper {边框:2px实线；动画:更改5s线性无限交替；}.wrapper>div {边框:2px纯绿色；}@keyframes更改{从 {宽度:500像素；}至 {宽度:100px;}}  

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

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

This has a demo:

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

On Codepen

Chrome result:

Firefox/IE result:

I saw the W3C document.
Absolutely locate non-displaced elements are calculated as follows.

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

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

Is the result of chrome wrong?

解决方案

^{This will probably not answer the question but I will try to explain what is happening with chrome and why both can be correct.}

First, you should notice that the same happen even if you consinder inline-block element or float as they are also shrink-to-fit elements

<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>

Now it's all about the width:100%. Since it's a percentage value, the reference will be the width of the containing block but our containing block is a shrink-to-fit element which means that its width depend on its content. Here we have a kind of cycle.

Here is the part of the specification that describe such behavior:

Sometimes the size of a percentage-sized box’s containing block depends on the intrinsic size contribution of the box itself, creating a cyclic dependency. When calculating the containing block’s size, the percentage behaves as auto. Then, unless otherwise specified, when calculating the used sizes and positions of the containing block’s contents: ...

So basically, we consider the width of our image to be auto, we calculate the width of the div (parent element) and then we use width:100% again on that calculated width.

Here come the difference. Firefox is considering the height set to the image in the calculation to find the value of the width of the image (as described in this part of the specification). Now that we have the new width of the image, the parent element will shrint-to-fit this width and we will reconsider the width:100% again based on the previous width.

Chrome is setting the width to auto BUT is not considering the height and in this case the width will use the intrinsic dimension of the image to have the following:

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

Now that we have the new width, we can calculate the width of the parent element (shrink-to-fit) and now if we set width:100%;height:100px to the image we wil have 100px for height and 100% of the containing block width which is the initial image width.

---

Now the question is: should we consider the height to calculate the value of new width of the image when this one is considered as auto in order to calculate the width of the containing block? If no Chrome is correct, if yes Firefox is correct.

---

Worth to note that in both cases the image may get distored. We don't notice this on Firefox in the actual example because the height is small.

Here is an animation to illustrate the distortion and to show the different behavior between both browsers.

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>

The wrapper here is used as the containing block of our shrink-to-fit element and will define the available width. We can clearly see that in Chrome the image is always distored and in Firefix the distortion will happen later.

这篇关于为什么在某些浏览器中img width的结果不同?谁是正确的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！