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

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

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

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

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

хотя это нормально использовать встроенные стили, ваши цели могут быть лучше обслуживаться путем включения внешнего файла 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;
}

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

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

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

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

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

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

вариант a. Простой прямой вперед. Что вы видите, что вы получаете легко сделать расчеты.

вариант b. слишком грязно, чтобы сделать это встроенным, если вы не хотите иметь сайт, который может растягиваться. Т. е. если вы использовали 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. слишком грязно, чтобы поддерживать.

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

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

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

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

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

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

ура.

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