Html img width: Атрибут width | htmlbook.ru

IMG width: размер изображения css

2021-07-14

Атрибут width HTML указывает исходную ширину изображения в пикселях.

Пример кода

<img src="https://www.internet-technologies.ru/wp-content/uploads/flamingo.jpg">

• Управление шириной изображения
• Управление размером картинки в CSS
• Адаптивная ширина изображения
• Информирование браузера — основная цель атрибута width
• Должен ли я использовать width?
• Поддержка браузерами

До появления CSS ширина изображения задавалась с помощью атрибута width. Такой метод на сегодняшний день является устаревшим. Но при отсутствии любых других правил CSS, определяющих ширину изображения, он все равно будет работать в большинстве браузеров. Тем не менее, это противоречит спецификации HTML5:

<!-- Это работает, но Вам не следует так делать.   --> <img src="https://www.internet-technologies.ru/wp-content/uploads/very-large-flamingo.jpg">

Примечание: Оригинальное изображение гораздо шире, чем 500 пикселей.

Для управления HTML max width изображения следует использовать CSS:

#fixed-width-flamingo {  width: 500px; }
<img src="https://www.internet-technologies.ru/wp-content/uploads/flamingo.jpg">

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

#responsive-image {  width: 100%;  height: auto; } 
<img src="https://www.internet-technologies.ru/wp-content/uploads/very-large-flamingo.jpg">

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

Или элемент <picture>, чтобы задать альтернативный дизайн изображения.

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

#responsive-flamingo {  width: 100%;  height: auto; } 
<img src="https://www.internet-technologies.ru/wp-content/uploads/very-large-flamingo.jpg">

Примечание: На большинстве экранов изображение будет выходить за пределы контейнера, если оно имеет ширину более 1280 пикселей.

Это поможет браузерам быстрее и более аккуратно отображать страницы, особенно в сочетании с элементом height. Рассмотрим приведенный выше пример.

В CSS width HTML устанавливается на 100%, а высота — на auto. Браузер не сможет узнать, сколько пикселей по высоте выделить для рисунка, пока не загрузит все изображение полностью и не проверит заголовок файла, чтобы узнать его размер. Если атрибуты width и height отсутствуют, программа не сможет этого сделать. Но если оба атрибута указаны, браузер сможет вычислить это с помощью математических расчетов:

display_height = img_height × ( display_width ÷ img_width )

Сделав это, можно предотвратить ситуацию, когда при загрузке изображения оно сдвигает контент вниз и происходит раздражающий резкий скачок, в результате которого пользователь теряет из виду часть текста. Используйте атрибуты HTML width height правильно – определяйте исходную высоту изображения, а не указывайте размер, в котором оно должно отображаться на странице.

IE	Firefox	Chrome	Edge	Safari	Opera
Полностью	Полностью	Полностью	Полностью	Полностью	Полностью

АРАлина Рыбакавтор

html.

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

Является ли лучшей практикой кодирования определение размера изображения в атрибутах ширины тега img и высоты ?

Или в стиле CSS с шириной/высотой?

Или оба?

• HTML
• CSS
• изображение

1

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

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

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

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

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

0

Историческая причина определения высоты/ширины в тегах заключается в том, что браузеры могут изменять фактические

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

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

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

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

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

6

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

Таким образом, вы можете определить класс изображения (например, «Миниатюра», «Фото», «Большой» и т. д.) и назначить ему постоянный размер. Это поможет, когда вы столкнетесь с изображениями, требующими одинакового размещения на нескольких страницах.

Вот так:

В вашем заголовке:

Ваш HTML:

В css/style.css:
img.thumbnail {
   ширина: 75 пикселей;
   высота: 75 пикселей;
}
 

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

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

 .my_images img {ширина: 20 пикселей; высота: 20 пикселей}
 

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

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

4

Опция а. Простой прямой вперед. То, что вы видите, это то, что вы получаете легко делать расчеты.

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

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

 /*CSS*/
ul.myThumbs{}
ul.myThumbs ли {плавать: влево; ширина: 50 пикселей;}
ul.myThumbs li img{width:50px; высота: 50 пикселей; граница: 0;}


 jpg" alt="" />

 

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

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

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

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

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

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

ура.

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

1

HTML 标签 的 Высота 和 Ширина 属性

HTML 标签

实例

将 宽度 和 高度 分别 为 200 像素 ：

  HIST = "SRC ="/I/MOUSE.JPG " HIST =" 200 " /> 

亲自 试 一试

定义 用法 用法

标签 的 Высота 和 属性 设置 图像 的。。

： ： ： 图像 指定 和 和 一 个 好 习惯。 习惯。 习惯 好。 好 好 好 好 设置 好 好 好 好。了 这些 ， 就 可以 在 页面 加载 时 为 图像 预留 空间 如果 没有 这些 属性 ， 浏览器 就 无法 了解 的 尺寸 ， 也 无法 为 图像 合适 的 空间 ， 因此 图像 加载 时 页面 布局 就 就 空间 因此 当 加载 时 的 就会 发生 变化 （（的 篇幅 详细 解释 了 这个 观点））。

提示 ： 请 不 通过 通过 和 和 属性 来 缩放。 如果 通过 和 和 和 （属性 缩小 图像 ， 那么 就 容量 容量 （（（（（（（（（（（（（（（即使 图像 页面 上 看上去 很 小））。 的 做法 是 ， 在 网页 上 使用 图像 之前 应该 通过 软件 把 图像 为 合适 的。

延伸 阅读 ： 详解 Высота 和 Ширина 属性

更 实例

两 个 可以 比 实际 的 尺寸 大 一些 或 小 一些。 会 自动 调整 图像 ， 使 其 适应 这个 空间 的 大小 使用 这 种 就 可以 很 容易 为 大 图像 创建 其 缩略图 放大 就 很 容易 为 图像 其 其 放大 放大 放大 放大 缩略图 放大 缩略图 缩略图很 小 图像。 但 需要 注意 的 ： ： 浏览器 必须 要 下载 整 个 文件 ， 不管 它 最终 的 尺寸 是 多 大 ， ， ， 它 没有 其 的 宽度 和 高度 高度 ， 如果 没有 保持 保持 其 的 宽度 高度 高度 图像 发生 如果 没有 保持 保持 其 原来 宽度 高度 比例 发生 扭曲 没有 保持 保持 保持.