Как задать блоку высоту чтобы с изображением внутри было адаптивным с блоком?

Question

[Masterof]

Доброго времени суток. есть такой вопрос по гугл СПИД тест просит задать ширину и высоту изображения чтобы в момент загрузки небыло смещения макета и уже было занято пространство а потом загружалась картинка. Я попробую применить Решил применить aspect ratio но не срабатывает хотя в html прописал ширину но высоту если поставить фиксированную то фото блин сужается не могу понять как сделать чтобы высота была прописана точно чтобы занять место под изображение
Блоки все вертикальные.

Comments

[Ankhena]

Например, height: unset или auto (зависит от окружения)

[Masterof]

Нет, аuto не катит. Нужно чтобы страница имела блоки с занятым точным пространством под изображение это чтобы небыло смещение макета и потом уже при в процессе загрузки фото подгружались. Гугл спиид тест

[Сергей Сергей]

То есть, заданные фиксированный размер в вёрстке не совпадают с фактическим размером изображения? Может поможет https://developer.mozilla.org/ru/docs/Web/CSS/obje... .

[Ankhena]

Masterof,

это чтобы небыло смещение макета

Да. Поэтому гугл просит вас указать размеры изображения через атрибуты.
Вы можете указать либо родные либо пропорциональные. Об этом написано в хелпе гугла, но лень искать где.

Чтобы вам эта фикс высота не мешала при адаптиве, вы её переопределяете стилями. Пропорции при этом сохраняются, все довольны.

[Masterof]

Сергей Сергей, да

[Masterof]

Ankhena, не годится чтобы ггугл СПИД не ругался на смещение макета должны быть точные значения высоты а при них блок где фото становится по высоте не резиновый и имеет постоянную высоту что не могу понять как и сделать высоту фиксированную и чтобы она была адаптивной, когда задаю высоту и потом тестю то ошибка пропадает но понято дело вёрстка никакая

[Ankhena]

Masterof, ещё раз медленно:

чтобы ггугл СПИД не ругался на смещение макета должны быть точные значения высоты

Да, в разметке пишете фикс высоту.

и чтобы она была адаптивной

В стилях меняете с помощью unset или auto или как хотите ещё.

[Masterof]

Ankhena, спасибо тебе добрый человек, ты реально мне помог, как же просто это было. Действительно указал в ращметке и высоту и ширину а в стилях высоту unset и все сработало.

[Ankhena]

Masterof, рада, что всё получилось))

Answer 1

[Ваня Зюзгин]

Ну google имеет ввиду, что должно быть так:

<img src="image.jpg" alt="Картинка" width="200" height="100"/>

Чтобы размеры задавались в HTML и браузер выделил этот размер, а у Вас высота картинки подгружается вместе со стилями.

Comments

[Masterof]

Когда высоту ставишь то картинка уже не адаптируется, вот и спрашиваю как можно задать высоту точную с адаптацией