Кстати еще такой момент, может кто-нибудь может подсказать ? У img

Question

Кстати еще такой момент, может кто-нибудь может подсказать ? У img

- понятное дело, width и height прописывается как атрибуты тега. В случае резиновой верстки, насколько изучал вопрос - необходимо прописывать не размер изображения, в котором оно будет отрендерено на странице (Rendered size), а размер исходника (Intrinsic size), чтобы браузеру было удобно высчитывать пропорции (Aspect ratio) и рендерить изображение. Rendered size указывается в любом случае в css, чтобы не было смещений layout'а при рендере.
А вот в случае с picture...
В спецификациях указано следующее: прилагаю скриншот
Получается в каждом picture, у каждого source и img - необходимо указывать width и height ?

#frontend #programming #russian

0

20.05.2023

6 ответов

12 просмотров

userconcept Concept Автор вопроса

Evgeniy Beskrovnyy
Да, вот же пример на https://developer.mozilla.org...

Точно, Спасибо Большое! ) Странно как сразу не увидел, я что-то с mdn/picture - сразу на whatwg перешел, а на mdn в документации к source все подробно описано )

0

20.05.2023

Alex Elkin🇪🇸

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

0

20.05.2023

userconcept Concept Автор вопроса

Alex Elkin🇪🇸
Нууу эти атрибуты у сурсов тока завезли в спеку он...

Да, в css конечно всегда указываю явные размеры для рендера изображений, если они не резиновые, если резиновые - тогда width: 100%; или max-width: 100%; В зависимости от обстоятельств ) Поидее в таком случае, даже если изображение будет подгружено позже, насколько я понимаю - не будет происходить reflow, либо как минимум не будет смещаться layout визуально ) Но в то же время хотелось бы дать браузеру изначально информацию об исходных width/height изображений, чтобы ему было еще на этапе layout'а удобней делать вычисления, исходя из пропорций width/height изображений ) По идее я предполагаю, что в любом случае, с заделом на будущее можно прописать width/height для source'ов, вряд ли это будет считаться не валидным кодом, а со временем это поможет браузерам ) Поправьте, если в чем-то не прав )

0

20.05.2023

Alex Elkin🇪🇸

userconcept Concept
Да, в css конечно всегда указываю явные размеры дл...

Проверь в валидаторе, но должно нормально все быть.

0

20.05.2023

userconcept Concept Автор вопроса

Alex Elkin🇪🇸
Проверь в валидаторе, но должно нормально все быть...

Понял, спасибо!

0

20.05.2023

Evgeniy Beskrovnyy · Accepted Answer

Да, вот же пример на https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source <picture> <source srcset="landscape.png" media="(min-width: 1000px)" width="1000" height="400"> <source srcset="square.png" media="(min-width: 800px)" width="800" height="800"> <source srcset="portrait.png" media="(min-width: 600px)" width="600" height="800"> <img src="fallback.png" alt="Image used when the browser does not support the sources" width="500" height="400"> </picture>

169 похожих чатов

Кстати еще такой момент, может кто-нибудь может подсказать ? У img

6 ответов

Похожие вопросы