Должен ли размер изображения определяться в атрибутах высоты/ширины img или в CSS?

Ответ 1

Я собираюсь пойти против зерна здесь и заявить, что принцип ветки содержимого от макета (который будет оправдывать ответы, предлагающие использование CSS), не всегда относится к высоте и ширине изображения.

Каждое изображение имеет врожденную, оригинальную высоту и ширину, которые могут быть получены из данных изображения. В рамках контента и макета я бы сказал, что эта информация о высоте и ширине является содержимым, а не макетом, и поэтому должна отображаться как HTML как атрибуты элемента.

Это очень похоже на текст alt, который также можно назвать производным от изображения. Это также подтверждает идею о том, что произвольный пользовательский агент (например, речевой браузер) должен иметь эту информацию, чтобы связать ее с пользователем. По крайней мере, соотношение сторон может оказаться полезным ( "изображение имеет ширину 15 и высоту 200" ). Такие пользовательские агенты не обязательно обрабатывали бы любой CSS.

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

Итак, в зависимости от того, что вы хотите сделать, вы должны указать один и/или другой. Я думаю, что в идеале исходная высота и ширина всегда указывались бы как атрибуты HTML-элемента, в то время как информация о стильности должна быть передана в CSS.

Ответ 2

Историческая причина определения высоты/ширины в тегах заключается в том, что браузеры могут изменять фактические элементы <img> на странице еще до загрузки ресурсов CSS и/или изображений. Если вы не укажете высоту и ширину явно, элемент <img> будет отображаться в 0x0, пока браузер не сможет его размер на основе файла. Когда это происходит, он вызывает визуальное отражение страницы после загрузки изображения и усугубляется, если на странице есть несколько изображений. Определение размера <img> по высоте/ширине создает физический заполнитель в потоке страницы с правильным размером, позволяя вашему контенту загружаться асинхронно, не нарушая работу пользователя.

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

Наконец, бывают случаи, когда вы можете не знать размер изображения раньше времени (изображение src может быть загружено динамически или может измениться в течение жизни страницы через script), и в этом случае использование CSS только делает чувство.

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

Ответ 3

В то время как это нормально использовать встроенные стили, ваши цели лучше обслуживать, включая внешний CSS файл на странице. Таким образом, вы можете определить класс изображения (т.е. "Миниатюра", "фото", "большой" и т.д.) И присвоить ему постоянный размер. Это поможет, когда вы получите изображения, требующие одинакового размещения на нескольких страницах.

Вот так:

In your header:
<link type="text/css" rel="stylesheet" href="css/style.css" />

Your HTML:
<img class="thumbnail" src="images/academia_vs_business.png" alt="" />

In css/style.css:
img.thumbnail {
   width: 75px;
   height: 75px;
}

Если вы хотите использовать встроенные стили, хотя лучше всего использовать ширину и высоту, используя атрибут style для удобства чтения.

Ответ 4

<img id="uxcMyImageId" src"myImage" width="100" height="100" />

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

Ответ 5

Определенно не оба. Помимо этого я должен был бы сказать это личное предпочтение. Я бы использовал css, если у меня было много изображений одного и того же размера, чтобы уменьшить код.

.my_images img {width: 20px; height:20px}

В долгосрочной перспективе CSS может победить из-за устаревания атрибута HTML и, скорее всего, из-за роста форматов векторных изображений, таких как SVG, где на самом деле имеет смысл масштабировать изображения с использованием непиксельных единиц, таких как% или em.

Ответ 6

Вариант a. Простое прямое fwd. То, что вы видите, - это то, что вам легко сделать вычисления.

Вариант b. Слишком грязный, чтобы сделать это inline, если вы не хотите иметь сайт, который может растягиваться. IE, если вы использовали with:86em, однако современные браузеры, похоже, справляются с этим функционально адекватно для моих целей. Лично единственный раз, когда я буду использовать что-то вроде этого, я должен создать каталог миниатюр.

/*css*/
ul.myThumbs{}
ul.myThumbs li {float:left; width:50px;}
ul.myThumbs li img{width:50px; height:50px;border:0;}

<!--html-->
<ul><li>
<img src="~/img/products/thumbs/productid.jpg" alt="" />
</li></ul>

Опция c. Слишком грязная для обслуживания.

Ответ 7

Я использую contentEditable, чтобы разрешить редактирование большого текста в моем приложении. Я не знаю, как он проскальзывает, но когда изображение вставлено и затем изменено (путем перетаскивания якорей на его стороне), он генерирует что-то вроде этого:

  <img style="width:55px;height:55px" width="100" height="100" src="pic.gif" border=0/>

(последующее тестирование показало, что вставленные изображения не содержат этот "мошеннический" стиль attr + param).

При визуализации браузером (IE7) ширина и высота в стиле переопределяют параметр ширины/высоты img (так что изображение показано так, как я этого хотел. изменено до 55 пикселей x 55 пикселей). Так что все прошло хорошо, кажется.

Когда я вывожу страницу в документ за миллисекундом, устанавливая приложение mime type/msword или вставляя рендеринг браузера в документ msword, все образы возвращаются к размеру по умолчанию. Я наконец узнал, что msword отбрасывает стиль и использует тег ширины и высоты img (который имеет значение исходного размера изображения).

Пришло время, чтобы это выяснить. Во всяком случае... Я закодировал функцию javascript, чтобы пересечь все теги и "перенести" значения img style.width и style.height в img.width и img.height, а затем очистить оба значения в стиле, прежде чем продолжить сохраняя эту часть данных html/richtext в базе данных.

приветствий.

opps.. мой ответ - нет. оставляйте оба атрибута непосредственно под img, а не в стиле.