Битые картинки vs CSS

Перефразируя устойчивое выражение: broken image happens. И раз уж они все равно могут появиться на вашем сайте, то с ними нужно что то делать, т.е. как минимум иметь механизм управления их внешним видом, вместо стандартного поведения браузера.

Здесь мы не будем рассматривать возможности JS, где вы можете вылавливать события onerror объекта window, что позволит реализовать любую логику дальнейшего поведения (например, протоколирование фронт-енд ошибок на сервере). Мы остановимся на CSS трюках, чтобы визуально оформить наши битые картинки.

Объектом исследования станет следующий HTML пример:

Результат рендеринга такого <IMG> (возможно, немного иной для разных браузеров) вы видите в начале статьи.

Прячем калеку

Первое желание — это спрятать покалеченную картинку, по крайней мере, пустой квадрат выглядит лучше. Сделать это просто:

Если изображение не прогрузилось, то вместо неё будет пустое пространство.

Заменяем битую картинку своим изображением

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

Это может логотип компании, или изображение с надписью — «Картинка подготавливается», тут ваша фантазия должна вам подсказать как обыграть данную ситуацию.

«Резервное» изображение цепляется как background-image самого тега IMG или его псевдо-контейнеров. Пример стилей:

По сути ясно, что сам контейнер IMG и его псевдо-элементы, идут поверх слоя «битой» картинки, и, таким образом, маскируют её от пользователя.

Мало букафф? Читайте есчо !

Анимация нажатия: эффект нажатой кнопки

Май 2, 2025 г.

Когда пользователь нажимает кнопку, полезно дать тактильную обратную связь — например, слегка "прижать" её визуально. Такой эффект достигается с помощью изменения масштаба (scale) и вертикального смещения (translateY). Это статья из цикла заметок по ...

Читать

Разрыв строки во flex

Март 6, 2024 г.

В общем случае, это может быть и "разрыв столбца", зависит от выбранного направления заполнения flex контейнера (задаётся свойством flex-direction). Суть проблемы в том, что иногда требуется прекратить заполнение вдоль выбранного направления и начать ...

Читать

Выравнивание блока HTML (вертикально и горизонтально)

Сентябрь 17, 2015 г.

Центровка элемента - одна из типовых задач в верстке. Решать её можно по разному, рассмотрим некоторые способы. Горизонтальная центровка. С центровкой ...

Читать

100vh не корректно работает для мобильных устройств

Июль 23, 2021 г.

Правильно будет сказать, что свойство не работает так как ожидается. Оказывается, что часть контейнера с установленной высотой 100vh, может быть перекрыта нижней панелью браузера. Разберемся как решается данная проблема. В интернете можно найти ...

Читать
 

Комментарии к «Битые картинки vs CSS»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: