Pull to refresh

Comments 21

Написано всё верно, сам часто встречаю "прыгающие" блоки. Но хотел бы выразить некоторое несогласие (возможно не внимательно читал). Разве так часто добавляют тег 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).
В общем, сильно зависит от ситуации.

css transition улучшит ситуацию :))

Тем что контент не прыгнет а поползёт?

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


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

Спасибо за перевод.
Правда мне не понятно как гарантировать проставление значений width/height если сайт заполняется не верстальщиком (на момент разработки), а контент менеджером и обычно это не те люди которые будут в PhotoShop подгонять размеры картинок под рекомендованные. (Если речь идет о блоге или интернет магазине)
+ мне кажется что на «прыганье» контента больше влияет min-height картинки чем width/height
UFO just landed and posted this here
Сайт заполняется машинами. Кто угодно дал картинку роботам, те почитали содержимое и всё о ней знают. А дальше эти же машины отдают человекам 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. Но что-то не зашло…

При условии что ты юзаешь лезилоад, а это сейчас само собой разумеющиеся, можно юзать 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

Если бы браузеры по умолчанию учитывали aspect ratio, то не пришлось бы городить неведомую хрень.
UFO just landed and posted this here
Ну как нет? Как-то же браузер приводит ширину картинки к ширине экрана, раз
img {
  max-width: 100%;
}

Значит ширину экрана он знает, width и height заданы. Он же рисует пустой прямоугольник ужатый по ширине, пусть и высоту ужмет во столько же раз. Разве так нельзя?
UFO just landed and posted this here
Sign up to leave a comment.

Articles