Что такое `height: intrinsic` в браузере Safari?

Question

У меня есть некоторые трудности в поддержании размера изображения. Из того, что я знаю, для лучшего SEO мы должны указать ширину и высоту в теге img. Но я хочу сделать его отзывчивым и следовать за родителем, поэтому я объявил и высоту, и ширину как 100%.

<img src="example.jpg" width="100%" height="100%" />

Для Chrome все работает отлично. Изображение сохранило свое соотношение и не растягивается. Но в Safari изображение стало растягиваться. Поэтому, когда я попытался отрегулировать высоту в Safari, я нашел это свойство intrinsic для высоты, которое каким-то образом решило мою проблему. Но я не знаю, что это, я никогда не слышал об этом. Так что же такое intrinsic?

Answer 1

Согласно CanIUse ,

Старые браузеры WebKit также поддерживают неофициальное значение intrinsic, которое действует так же, как max-content.

Другими словами, это то же самое, что и height: max-content в последней Chrome.

Теперь у меня нет Safari здесь, поэтому я не знаю, можете ли вы также использовать max-content там , поэтому лучше также оставить intrinsic в качестве запасного варианта.

Кстати, атрибуты размера в процентах устарели с HTML5. Поэтому для того, чтобы сделать это действительным, вам нужно просто ввести некоторые числа в атрибуты и затем изменить их на то, что они должны быть (100%, max-content) с помощью CSS.