Комментарии 17

Написано всё верно, сам часто встречаю "прыгающие" блоки. Но хотел бы выразить некоторое несогласие (возможно не внимательно читал). Разве так часто добавляют тег img без фиксированных родителей? В своей вёрстке всегда несколько div'oв с высотой, шириной, а уже в них идёт изображение, которое подстраивается под родителей, а если нет изображения, то стоит заглушка.
Для варианта, когда у img родитель body, конечно же нужна высота.


Хотел бы услышать какие-то комментарии, пояснения, тема для меня интересная.

картинки часто через wysiwyg вставляют и без обертки div
Хотя справедливости ради, многие wysiwyg добавляют к img атрибуты width и height
картинки часто через wysiwyg вставляют и без обертки div
«Дергать» размеры можно при помощи php getimagesize
Или, к примеру, в Smarty есть замечательная функция {html_image} — «дергает» width и height изображений (плюс умеет конвертить относительные пути в абсолютные)

Семантически правильно теги <img> добавлять, если это является контентом. Контент часто приходит извне, и верстальщику заранее неизвестен. Если картинка это часть интерфейса — там следует использовать фоновое изображение — и там да, чаще у блоков определённые размеры, а изображение встраивается в него.
Хотя иногда встречаются и контентные изображения с жёстко заданной абсолютной высотой (например) и динамической, но так же жёстко заданной шириной (например 100% в теле поста) у родителя, но которые "встраиваются" с разным размером и типом встраивания (в зависимости от ширины текущей области видимости). Так, у блока будут указаны размеры, а изображение будет адаптироваться (имитация background-size: contain/cover).
В общем, сильно зависит от ситуации.

Или прелоадер использовать.
Оба варианта с тегом /sarcasm


Выше писал, что фиксированный родитель поможет.

Спасибо за перевод.
Правда мне не понятно как гарантировать проставление значений width/height если сайт заполняется не верстальщиком (на момент разработки), а контент менеджером и обычно это не те люди которые будут в PhotoShop подгонять размеры картинок под рекомендованные. (Если речь идет о блоге или интернет магазине)
+ мне кажется что на «прыганье» контента больше влияет min-height картинки чем width/height

Пакетная обработка изображений есть в том же IrfanView. А контентам надо соблюдение размера в должностной инструкции прописыватб, и требовать соблюдение должен менеджер магазина.


Ну так, по хорошему-то.

Сайт заполняется машинами. Кто угодно дал картинку роботам, те почитали содержимое и всё о ней знают. А дальше эти же машины отдают человекам HTML, где могут всё проставить.

Не понял статью и заголовок.
1) Снова важно — был момент, когда было не важно?
2) Зачем велосипеды после пункта 2, если пункт 2 решает проблему?
Такое ощущение что я что-то очень важное упустил, но не пойму что именно.
Aspect ratio — здорово, но не для картинок. Для iframe, всплывашки с непонятным содержимым и всего остального, где размеры явно не задаются либо непривычно думать о сущностях, как о картинках.

Интересно, почему в оригинальной статье обошли использование div с background-image? Вроде бы background-size решает все упомянутые проблемы.

Семантически это тоже правильно, потому что
вот тут, например
image

мы хотим вставить не просто изображение, а контейнер для изображения, в котором может быть одно или несколько изображений со всевозможными эффектами и блекджеком.

Лет 5 назад предлагал на twbs улучшить хак с padding-bottom на примере iframe (в них width и height задаются в 99% случаев) — «забирать» width и height js-ом и корректировать padding-bottom. Но что-то не зашло…
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.