Почему в некоторых браузерах результаты img width различаются? Кто прав? - PullRequest
Новая
       37

Почему в некоторых браузерах результаты img width различаются? Кто прав?

4 голосов
/ 02 мая 2019

Это демо: 

<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

Неправильный ли результат хрома?

1 Ответ

2 голосов
/ 02 мая 2019

Это, вероятно, не ответит на вопрос, но я попытаюсь объяснить, что происходит с 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%.Так как это процентное значение, ссылка будет шириной содержащего блока, но наш содержащийся блок является усадочным элементом, что означает, что его ширина зависит от его содержимого.Здесь у нас есть своего рода цикл.

Вот часть спецификации , которая описывает такое поведение:

Иногда размер блока в процентахсодержащий блок зависит от вклада внутреннего размера самого блока, создавая циклическую зависимость.При расчете размера содержащего блока, процент ведет себя как auto .Затем, если не указано иное, при расчете используемых размеров и позиций содержимого содержащего блока: ...

Итак, в основном, мы считаем ширину нашего изображения равной auto, мы вычисляемширина div (родительский элемент), а затем мы снова используем width:100% на этой вычисленной ширине.

Вот и разница.Firefox учитывает высоту, установленную для изображения, в расчете, чтобы найти значение ширины изображения (как описано в этой части спецификации ).Теперь, когда у нас есть новая ширина изображения, родительский элемент будет уменьшен, чтобы соответствовать этой ширине, и мы снова пересмотрим width:100% на основе предыдущей ширины.

Chromeустанавливает ширину в авто, НО не учитывает высоту, и в этом случае ширина будет использовать собственный размер изображения, чтобы иметь следующее: 

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

Теперь, когда у нас есть новая ширина, мы можем вычислить ширину родительского элемента (сжимать до соответствия) и теперь, если мы установимwidth:100%;height:100px к изображению у нас будет 100px для высоты и 100% ширины вмещающего блока, который является начальной шириной изображения.

Теперь вопрос: следует ли нам рассматривать высоту довычислите значение new width изображения, когда это рассматривается как auto, чтобы вычислить ширину содержащего блока?Если 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 искажение произойдет позже.

...