Why are the results of img width different in some browsers? Who is correct?

问题

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?

回答1:

^{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.

来源：https://stackoverflow.com/questions/55949254/why-are-the-results-of-img-width-different-in-some-browsers-who-is-correct

标签

css

google-chrome

internet-explorer

firefox