Как задавать значения width и height изображениям при адаптивной верстке?

Question

[Вячеслав Яшников]

Если я использую атрибут loading="lazy" у изображений, то из-за того, что не задается высота, при загрузке происходит смещение контента вниз.

Отсюда вопрос как с этим бороться?

Можно задать ширину и высоту картинке, но у нее должны быть разные значения на мобилке и на десктопе, а картинка одна.

Еще вопрос как быть с резиновыми картинками в таком случае, которые занимают 100% ширины экрана и соответственно высота у них тоже меняется пропорционально соотношению сторон на мобилке, а на десктопе у них фиксированная ширина и высота

Comments

[Ankhena]

При верстке mobile-first ставятся мобильные размеры картинки.
При desktop-first, соответственно.
В рекомендациях гугла видела фразу о том, что достаточно просто правильных пропорций в атрибутах.
Потом переопределяются стилями.
Также атрибуты width и height задаются тегам source при использовании picture.

[Вячеслав Яшников]

Ankhena, да, но как быть если десктоп картинка переезжает на мобилку в адаптивный верстке с использованием ем медиа запросов

[Ankhena]

Вячеслав Яшников, что именно вас смущает в

Потом переопределяются стилями.

Высоту на просто auto

[Алексей]

Вячеслав Яшников, использовать aspect-ratio в css

Answer 1

[vlados1411]

задать родителю position: relative и padding-bottom: 67%(от этого зависит соотношение сторон, есть поставить 100%, получится квадратное изображение. а самому IMG position; absolute, width: 100%, height: 100%, top: 0, left: 0 ну и object-fit: cover или contain

Comments

[Ankhena]

https://caniuse.com/?search=aspect-ratio
И это заодно https://developer.mozilla.org/ru/docs/Web/CSS/obje... вместо абсолютов.
Гриды, кстати, тоже уже выдуманы.

Но в вопросе-то нужно сохранение родных пропорций, а не та история, которую рассказываете.