Comments 32
Чтобы битая картинка не ломала дизайн и не так была заметна, в первую очередь надо задавать точный размер всех картинок. Тогда однопиксельная картинка не превратится в то, что на первом скриншоте. Но по-моему для большинства разрабов просто лень прописывать размеры всех картинок, так как браузеры нормально её сами растянут.
Применять однопиксельные картинки бред ещё тот…
А в респонсиве что делать? У изображения ширина 100%, высота высчитывается автоматически, пропорции задать нельзя.
Задавать минимальную высоту.
Если пропорции известны, то есть два способа: через контейнер c padding-top, либо через SVG.
В отличие от минимальной высоты и т.п., помогает избежать reflow после того, как картинка загрузится.
В отличие от минимальной высоты и т.п., помогает избежать reflow после того, как картинка загрузится.
А что с поддержкой в IE?
К сожалению, ни IE7-11, ни Edge данные методы не поддерживают.
Судя по всему, автор IE считает программой для скачивания браузеров ;)
В комментариях к оригинальной статье пишут, что IE как раз всё делает по стандарту (внутри самозакрывающихся тегов не может быть псевдоэлементов). То есть это хак, но довольно полезный.
Хабр — не место для политики.
Не надо унижаться до того, чтобы высказывать собственные симпатии или антипатии подобным образом.
В оригинальном тексте (по ссылке в начале поста) совсем другая картинка.
Не надо унижаться до того, чтобы высказывать собственные симпатии или антипатии подобным образом.
В оригинальном тексте (по ссылке в начале поста) совсем другая картинка.
У вас паранойя.
Это адаптация перевода. В данной публикации не было ни малейшего намека на политику. Только CSS. Если использованная информация и графика вас чем-то оскорбила, то приношу свои извинения.
Когда «битый Владимир» пишется и подразумевается глава государства — это выглядит, мягко говоря, ангажированно и политизированно.
Можно было подобрать более нейтральное изображение, которое бы не имело отношение к политике.
Можно было подобрать более нейтральное изображение, которое бы не имело отношение к политике.
Чтобы не было таких недоразумений, лучше всегда применять ставшую уже стандартом в этой сфере Лену. =)
https://habrastorage.org/files/2d8/52b/2d7/2d852b2d763b43a289dbc4b9ab94ba59.jpg
https://habrastorage.org/files/2d8/52b/2d7/2d852b2d763b43a289dbc4b9ab94ba59.jpg
IOS начинает напоминать IE6 нового поколения. Ничего не умеет, ничего не хочет обвлять, всех всё устраивает. Но MS хотя бы не запрещала запускать альтернативные движки на Windows XP, за счёт чего FF/chrome и появились.
Хороший способ, спасибо. Можно также использовать JS способ: />. С осликом проблем нет.
Если я правильно понимаю, то то, что не поддерживает описанные методы, будет отображать битые картинки стандартными способами. Тогда ничего страшного в общем-то. Хром, Огнелис и Опера — самые распространённые браузеры.
Кстати, используя before, after и FontAwesome можно стилизовать отсутствующие аватарки (когда их нет).
Кстати, используя before, after и FontAwesome можно стилизовать отсутствующие аватарки (когда их нет).
Вы потеряли суть перевода, не включив это изображение в текст!
Уже пару недель эту статью можно прочитать по-русски в более удачном переводе (и без политики) здесь: ссылка.
Sign up to leave a comment.
Оформляем красиво «битые» картинки