Размер изображения html img height и разные экраны?

Question

[Za Za]

<img decoding="async" alt="WordPress logotype" src="/img/WordPress-logotype_scale,w_4000.png"
 	 data-srcset="/img/WordPress-logotype.svg 100w" 
         srcset="/img/WordPress-logotype.svg 100w" sizes="100vw" 
width="666" height="360">

Все хорошо когда пока экран не стал width="375" при этом height="360" остался
как сделать так чтоб при изменении экрана вместе с width менялся пропорционально и height и при этом гугл был зеленый и validator.w3 тоже зеленый

Comments

[Ankhena]

Можно уточняющий вопрос: зачем вам вообще png?

Но вообще для сохранения пропорций картинкам задают heigth: auto в стилях.

[Za Za]

Ankhena, для скармливания гуглу (он отврано индексирует svg)
svg хорошо для оформления а для индексации пока хер пойми как они там появляются - тестировал сам, так и не разобрался.
две одинаковых страницы на одной img png/jpg/webp на другой мой любимый svg
через пару суток гугл проиндексировал png и выдал в поиске, а svg так в поиске и не появилось (даже спустя месяц)

heigth: auto так это стоит и пропорции сохраняются(видно же на скринах), а вот зона в которой картинка лежит высота не изменеется

[Ankhena]

Za Za,

heigth: auto так это стоит

Ну да, это прямо видно в вопросе.

Сделайте песочницу с видимой проблемой на codepen.io

[Za Za]

Ankhena, ступил - только ширина стояла
все заработало как нужно
спасибо

Answer 1

[Александр Гринёв]

Да, можно. Нужно использовать CSS стили. Прикрепляю ссылку как это делается с живым примером: *тык*

Comments

[Za Za]

на живом примере высота одна и таже )))
как при этом фиксированная высота в теге img будет изменяться?
нужно чтоб при первой отрисовке контента на начальном экране не было дергания верстки
тоесть чтоб при загрузке хтмл браузер знал какая высота у изображения на этом экране (мобилный/планшет/десктоп)
браузер считывает высоту и резервирует место для картинки (а после она уже там подгружается)
это хорошо видно когда вкл 2g загрузку контента



после того как прописал так
и у текста что под изображением слишком много воздуха