Оформляем красиво «битые» картинки

[@MasMaX]

Чтобы битая картинка не ломала дизайн и не так была заметна, в первую очередь надо задавать точный размер всех картинок. Тогда однопиксельная картинка не превратится в то, что на первом скриншоте. Но по-моему для большинства разрабов просто лень прописывать размеры всех картинок, так как браузеры нормально её сами растянут.

[@PretorDH]

Применять однопиксельные картинки бред ещё тот…

[@shara]

А в респонсиве что делать? У изображения ширина 100%, высота высчитывается автоматически, пропорции задать нельзя.

[@AlexFadeev]

Задавать минимальную высоту.

[@Deenamo]

Если пропорции известны, то есть два способа: через контейнер c padding-top, либо через SVG.

В отличие от минимальной высоты и т.п., помогает избежать reflow после того, как картинка загрузится.

[@Jabher]

А что с поддержкой в IE?

[@Tomio]

К сожалению, ни IE7-11, ни Edge данные методы не поддерживают.

[@Adward]

Судя по всему, автор IE считает программой для скачивания браузеров ;)

[@dusterio]

Так все уже считают :) Даже сами Microsoft

[@alexey-m-ukolov]

В комментариях к оригинальной статье пишут, что IE как раз всё делает по стандарту (внутри самозакрывающихся тегов не может быть псевдоэлементов). То есть это хак, но довольно полезный.

[@CuamckuyKot]

Хабр — не место для политики.

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

В оригинальном тексте (по ссылке в начале поста) совсем другая картинка.

[@berezuev]

У вас паранойя.

[@CuamckuyKot]

У вас карма -10.

[@Tomio]

Это адаптация перевода. В данной публикации не было ни малейшего намека на политику. Только CSS. Если использованная информация и графика вас чем-то оскорбила, то приношу свои извинения.

[@CuamckuyKot]

Когда «битый Владимир» пишется и подразумевается глава государства — это выглядит, мягко говоря, ангажированно и политизированно.

Можно было подобрать более нейтральное изображение, которое бы не имело отношение к политике.

[@Seekeer]

это выглядит, мягко говоря, ангажированно и политизированно.
А не могли бы вы объяснить, как именно это выглядит? Автор подобным способом поддерживает или осуждает?
Мне просто интересно, в чём вы его осуждаете:)

[@Adward]

Видно же что комментатора смущает именно "Битый Путин". Если раскидать логически — именно тут подтекст. Ну неприятно ему представлять в обозримом будущем ни "Битого Путина", ни "Путина в разрезе" и в каких других ипостасях.

[@AlexFadeev]

Чтобы не было таких недоразумений, лучше всегда применять ставшую уже стандартом в этой сфере Лену. =)

https://habrastorage.org/files/2d8/52b/2d7/2d852b2d763b43a289dbc4b9ab94ba59.jpg

[@tyomitch]

Боюсь, alt="битая Лена" породило бы ещё больше разногласий.

[@Denai]

Так есть ещё котики. Они прекрасны, даже если не прогрузились. "Битый" — само по себе слово не очень удачное в данном контексте

[@amarao]

IOS начинает напоминать IE6 нового поколения. Ничего не умеет, ничего не хочет обвлять, всех всё устраивает. Но MS хотя бы не запрещала запускать альтернативные движки на Windows XP, за счёт чего FF/chrome и появились.

[@Error1024]

Выше уже отписались что это "багофича", а не часть стандарта и жаловаться не на что

[@PaulMaly]

Хороший способ, спасибо. Можно также использовать JS способ: />. С осликом проблем нет.

[@titulusdesiderio]

[@Adward]

что вы этим хотели сказать?

[@firya]

Человеку не понравилось качество изображений в статье, ведь правилами хорошего тона является выкладывать изображения с текстом в .png

[@XanderBass]

Если я правильно понимаю, то то, что не поддерживает описанные методы, будет отображать битые картинки стандартными способами. Тогда ничего страшного в общем-то. Хром, Огнелис и Опера — самые распространённые браузеры.

Кстати, используя before, after и FontAwesome можно стилизовать отсутствующие аватарки (когда их нет).

[@Tomio]

Все верно. С аватарками — отличная идея!

[@HeTpe3B]

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

[@lancedikson]

Вы потеряли суть перевода, не включив это изображение в текст!

[@psywalker]

Уже пару недель эту статью можно прочитать по-русски в более удачном переводе (и без политики) здесь: ссылка.