Comments 21
Написано всё верно, сам часто встречаю "прыгающие" блоки. Но хотел бы выразить некоторое несогласие (возможно не внимательно читал). Разве так часто добавляют тег img без фиксированных родителей? В своей вёрстке всегда несколько div'oв с высотой, шириной, а уже в них идёт изображение, которое подстраивается под родителей, а если нет изображения, то стоит заглушка.
Для варианта, когда у img родитель body, конечно же нужна высота.
Хотел бы услышать какие-то комментарии, пояснения, тема для меня интересная.
Хотя справедливости ради, многие wysiwyg добавляют к img атрибуты width и height
картинки часто через wysiwyg вставляют и без обертки div«Дергать» размеры можно при помощи php getimagesize
Или, к примеру, в Smarty есть замечательная функция {html_image} — «дергает» width и height изображений (плюс умеет конвертить относительные пути в абсолютные)
Семантически правильно теги <img>
добавлять, если это является контентом. Контент часто приходит извне, и верстальщику заранее неизвестен. Если картинка это часть интерфейса — там следует использовать фоновое изображение — и там да, чаще у блоков определённые размеры, а изображение встраивается в него.
Хотя иногда встречаются и контентные изображения с жёстко заданной абсолютной высотой (например) и динамической, но так же жёстко заданной шириной (например 100% в теле поста) у родителя, но которые "встраиваются" с разным размером и типом встраивания (в зависимости от ширины текущей области видимости). Так, у блока будут указаны размеры, а изображение будет адаптироваться (имитация background-size: contain/cover).
В общем, сильно зависит от ситуации.
css transition улучшит ситуацию :))
Правда мне не понятно как гарантировать проставление значений width/height если сайт заполняется не верстальщиком (на момент разработки), а контент менеджером и обычно это не те люди которые будут в PhotoShop подгонять размеры картинок под рекомендованные. (Если речь идет о блоге или интернет магазине)
+ мне кажется что на «прыганье» контента больше влияет min-height картинки чем width/height
Хороший, достаточно чистый перевод.
Спасибо.
Не понял статью и заголовок.
1) Снова важно — был момент, когда было не важно?
2) Зачем велосипеды после пункта 2, если пункт 2 решает проблему?
Такое ощущение что я что-то очень важное упустил, но не пойму что именно.
Aspect ratio — здорово, но не для картинок. Для iframe, всплывашки с непонятным содержимым и всего остального, где размеры явно не задаются либо непривычно думать о сущностях, как о картинках.
Семантически это тоже правильно, потому что
При условии что ты юзаешь лезилоад, а это сейчас само собой разумеющиеся, можно юзать base64 svg с заданным вьюпортом
img.lazy(
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1024'%3E%3C/svg%3E"
data-src="https://source.unsplash.com/random/1920x1024")
https://codepen.io/missing00/pen/QWEzMGO
Задавать Height и Width для изображений снова важно