Ширина/высота изображения как атрибут или в CSS?
Что такое "правильный" семантический способ указать высоту и ширину изображения? в CSS...
width:15px;
или встроенные...
<img width="15"
?
CSS кажется правильным местом для размещения визуальной информации. С другой стороны, мало кто будет утверждать, что изображение "src" не должно быть указано в качестве атрибута, а высота/ширина кажутся такими же привязанными к двоичным данным изображения, как и "src".
(Да, я понимаю, что с технической, конечной точки зрения это действительно не так вопрос.)
12 ответов:
Он должен быть определен inline. Если вы используете тег img, это изображение должно иметь семантическое значение для содержимого, поэтому для проверки требуется атрибут alt.
Если изображение должно быть частью макета или шаблона, вы должны использовать тег, отличный от тега img, и назначить изображение в качестве фона CSS для элемента. В этом случае изображение не имеет семантического значения и поэтому не требует атрибута alt. Я совершенно уверен, что большинство читателей экрана даже не знал бы, что изображение CSS существует.
Я думаю, что зависит от того, как вы используете атрибут. Если вы стиль несколько изображений в списке или таблице, чтобы они выложили правильно, а затем поместите ширину / высоту в свой CSS чтобы избежать необходимости добавлять еще один набор тегов к каждому изображению в списке. Используйте что-то вроде
ul.gallery img: { width:117px; }С другой стороны, если вы вставляете изображение в некоторых контент и он должен быть определенного размера, чтобы сделать поток документов правильно, а затем положить его в HTML. Таким образом, вам не придется испортить таблицу стилей для каждого отдельного изображения в html. И таким образом, если вы измените содержимое на другое изображение, удалите изображение все вместе, у вас нет остатков кода, разбросанных в вашем CSS, чтобы помнить об удалении.
высота и ширина должны быть включены в HTML. Причина в том, что он создает отступы на странице. Если по какой-либо причине img не загружается (и Вы были хорошим мальчиком и включили alt..браузер покажет, что кадр (с помощью w и h при условии) с alt внутри.
основная полезная причина-предотвращение эффекта "поп". Когда браузер загружает страницу, иногда большие аспекты, такие как img, требуют больше времени для загрузки, и если вы не указали w и h в HTML браузер временно свернет эту область, думая, что ее там нет. Затем, когда он, наконец, загружает все всплывает в нужное место.
Это особенно раздражает, но все еще довольно раздражает на компьютере, потому что вы собираетесь нажать на ссылку, и вдруг страница сдвигается вниз, и вы случайно нажали неправильную ссылку.
Если вы посмотрите на спецификацию HTML5, указав высоту и ширину, это опция, а не требование. Поэтому код действителен с этими атрибутами или без них.
с практической точки зрения очень желательно указать их, чтобы предотвратить переплавку страниц, Как упоминалось выше. Однако те, кто предполагает, что это должно быть в html из-за этого отсутствует тот факт, что браузеры используют css при создании страницы изначально. Если бы они этого не сделали, страницу пришлось бы перерисовывать для floated элементы, указанные отступы, поля и т. д.
следует ли указывать в html или css, лучше всего судить по отдельным обстоятельствам. Большое количество изображений одинакового размера, вероятно, будет лучше всего обслуживаться с помощью css, одно изображение с html. Тем не менее, если вы указываете другие стили для изображения (цвет границы, стиль или радиус, поплавок и т. д.), имеет смысл добавить ширину и высоту в css.
Если вы укажете в html, вы можете использовать только пиксели. Если вы хотите указать в скажем, в процентах вам придется использовать css.
на стороне записки, мы рекомендуется использовать EMS & % вместо px для того чтобы помочь избежать проблем, когда пользователи меняют настройки браузера и т. д. и т. п. Но изображения всегда указываются в пикселях. Очевидно, что существуют практические причины для использования px для изображений. Однако сохранение изображений в px, похоже, отрицает аргумент о том, что они не используются.
Я бы сказал HTML.
атрибуты width и height используются для остановки загрузки и роста страницы в несвязанном виде.
Если вы когда-либо читали блок текста на странице только для того, чтобы он был сдвинут вниз благодаря поздней загрузке изображения выше, вы знаете, как это расстраивает!
Добавление идентификатора к каждому изображению только для указания его ширины и высоты было бы смехотворным и почти таким же беспорядочным, как добавление двух атрибутов ширины / высоты в любом случае.уловка Firefox не использует атрибуты ширины и высоты для резервирования пространства изображений, однако я удивлен, что они не обновили его на самом деле.
на статья в MDN, атрибуты HTML указывают на внутренние размеры изображения, т. е. его реальные размеры. Вот почему, в то время как HTML 4 также допускает процентные значения, HTML5 допускает только значения px. (общий подводный камень: "px" не должно быть написано)
Если вы хотите отобразить изображение с этими размерами, работа выполнена. В противном случае, вы также должны добавить CSS, чтобы указать дисплей размер.
конечно, лучше обслуживать изображение в отображаемом размере, чтобы избежать изменения размера браузера, сохранить пропускную способность и т. д. но это не всегда возможно.
Смотрите также ответы на этот вопрос:в чем разница между атрибутом ширины HTML и CSS?
Если это часть вашего шаблона сайта, я бы поместил его в файл CSS.
Если он находится только на одной странице, он должен быть встроенным (или определен в блоке специфичного для страницы CSS вверху).
Я считаю,что это часть контента, как вы упомянули, так же, как и атрибут src.
с другой стороны, нет никакой реальной необходимости указывать ширину или высоту в html или css, хотя это может помочь Вашей странице визуализировать быстрее.
Я могу ошибаться, и если я, пожалуйста, кто-нибудь поправьте меня... но я думаю, что Google и некоторые другие поисковые системы индексируют содержимое тегов alt.
иногда, для эстетики дизайна, я создал изображение текста, созданного со шрифтами, которые не доступны через HTML, но доступны для Photoshop, Illustrator и т. д. Если у вас есть точное типографское впечатление, которое вы хотите создать, которое включает текстовую информацию, единственный способ получить это-создать изображение типографский текст и поместите фактический текст в тег alt ради поисковых систем.
Если у кого-то есть лучшее решение, я хотел бы услышать его.
между тем, Тхо, учитывая необходимость того, что я описал, мне кажется разумным проголосовать за встроенные параметры высоты/ширины HTML, а также текстовые описания alt, Как вопрос стандартной практики. Это, по сути, контент, а не просто дизайн в таких случаях-и такие случаи действительно не должны быть исключениями из правил. правило, пока CSS и поисковые системы не придумают лучшее решение.
как почтовые клиенты справляются с ограничениями img В качестве атрибутов против встроенных стили?
<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" ><img src="http://imperavi.com/img/redactor-image.jpg" width="1400" height="582" ><img src="http://imperavi.com/img/redactor-image.jpg" style="width: 120px; " ><img src="http://imperavi.com/img/redactor-image.jpg" style="width: 120px; height: 50px;" >так, ограничения размера img не следует устанавливать с помощью встроенных стилей, в первую очередь потому, что Outlook 2007/2010/2013 не учитывает их.
что происходит, когда используются как атрибуты, так и встроенные стили? Некоторые клиенты используют один или другой, а некоторые используют встроенную ширину в сочетании с атрибутом height:
<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" height="582" style="width: 120px; height: 50px;" >tldr: используйте img атрибуты для электронной почты html.
Я бы пошел с рекомендацией wi(d)th W3C.
то есть, определяя ширину и высоту как атрибут так:
<img src="example.png" width="150" height="150" alt="example image">http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element
Comments