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

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

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

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

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

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

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

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

Хотя встроенные стили можно использовать, для ваших целей лучше использовать внешний файл 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 для удобства чтения.

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

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

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

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

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

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

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

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

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

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

ура.

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