Атрибуты height и width тега <img> в HTML
Пример
Установите ширину и высоту изображения по отдельности в 200 пикселей:
<img src="/i/mouse.jpg" height="200" width="200" />
Определение и использование
Атрибуты height и width тега <img> устанавливают размер изображения.
Совет:Указание свойств height и width для изображения - это хорошая привычка. Если эти свойства установлены, они могут резервировать пространство для изображения при загрузке страницы. Если этих свойств нет, браузер не может понять размер изображения и не может оставить подходящее пространство, поэтому при загрузке изображения структура страницы изменяется. (Далее详细解释了这个观点).
Совет:Не изменяйте размер изображения через свойства height и width. Если уменьшать размер изображения через свойства height и width, пользователю нужно будет скачивать изображение с большой емкостью (даже если изображение на странице выглядит очень маленьким). Правильный подход - это обработать изображение до подходящего размера с помощью программного обеспечения до его использования на веб-странице.
Дополнительное чтение:Подробное описание атрибутов height и width
Более примеров
Изменение размера изображения - создание заполненного изображения
У свойств height и width есть скрытое свойство, что люди не должны указывать фактический размер изображения, то есть, эти значения могут быть больше или меньше фактического размера. Браузер автоматически корректирует изображение, чтобы оно соответствовало размеру резервного пространства. С помощью этого метода можно легко создавать miniature изображений для больших изображений и放大 очень маленькие изображения. Но нужно помнить: браузер все равно должен загружать весь файл, независимо от того, насколько большой он будет в конечном итоге отображаться, и, если не поддерживать его исходные пропорции, изображение будет искажаться.
Другой хитростью использования свойств height и width является возможность очень легко заполнить область страницы, а также улучшить производительность документа. Представьте, что вы хотите поместить цветную горизонтальную полосу в документ. Вам не нужно создавать изображение с полным размером, а достаточно создать изображение с шириной и высотой в один пиксель иassignить ему цвет, который вы хотите использовать. Затем используйте свойства height и width, чтобы расширить его до больших размеров.
<img src="/i/ct_1px.gif" width="200px" height="30px" />
Вот результат вышеуказанного HTML-кода, эта цветная полоса создана с помощью изображения, имеющего всего один пиксель:
Использование процентных значений
Одним из хитростей использования свойства width является использование процентных значений вместо абсолютных значений пикселей. Это позволит браузеру масштабировать изображение в зависимости от определенного процента от размера окна браузера. Таким образом, чтобы создать цветную горизонтальную полосу с шириной, равной ширине окна, и высотой 30 пикселей, можно сделать это следующим образом:
<img src="/i/ct_1px.gif" width="60%" height="30px" />
Когда размер окна документа изменяется, размер этого изображения также изменяется:
Совет:Если предоставлен процентный размер ширины, а высота игнорируется, то браузер будет поддерживать пропорции изображения при увеличении или уменьшении. Это означает, что соотношение высоты к ширине изображения не изменится, и изображение не будет искажаться.
Смотрите следующий HTML:
<img src="/i/ct_1px.gif" width="20%" />
То есть, если установить только процентное значение атрибута width изображения ct_1px.gif, вы получите прямоугольное изображение (поскольку исходный ct_1px.gif является прямоугольником с шириной и высотой 1 пиксель):
Совет:Вы можете попробовать это в нашем онлайн-инструменте для тестированияПопробуйте сами!
Совет:Цель предоставления вышеуказанных примеров - помочь вам лучше понять использование атрибутов height и width. Если вам нужно только большое пятно одного цвета для декорирования страницы, лучше всегоИспользование CSS для создания фона.
Поддержка браузеров
Все браузеры поддерживают атрибуты height и width.
Грамматика
<img height="value" />
или:
<img width="value" />
Значение атрибута
| Значение | Описание |
|---|---|
| pixels | Высота или ширина в пикселях. |
| percent | Высота или ширина в процентах от содержащего элемента. |
TIY пример
- Изменение размера изображения
- Этот пример демонстрирует, как можно изменить размер изображения.
Подробное описание атрибутов height и width
Почему следует использовать атрибуты height и width
Вы видели, когда содержимое документа загружается и показывает неупорядоченное движение? Это происходит из-за того, что браузер постоянно adjusts макет страницы, чтобы отобразить каждое загружаемое изображение. Браузер загружает и анализирует ширину и высоту изображения, чтобы определить его размер, затем оставляет соответствующий прямоугольник в окне отображения. Затем браузер adjusts макет страницы, чтобыinsert изображение в отображение. Это также говорит нам, что изображения являются независимыми файлами и загружаются отдельно от исходных файлов.
Но это не самый эффективный способ отображения документа, так как браузеру необходимо проверять каждый файл изображения и рассчитывать их экранное пространство перед отображением相邻ного и последующего содержимого документа. Это может привести к значительным задержкам в отображении документа, что может прерывать чтение пользователя.
Для автора более эффективным методом является использование атрибутов height и width тега <img> для указания размера изображения. Таким образом, браузер резервирует место для изображения перед его загрузкой, что ускоряет отображение документа и предотвращает перемещение содержимого документа. Оба атрибута должны быть целыми числами и указывать размер в пикселях. Порядок появления этих атрибутов в теге <img> не имеет значения.
Проблемы с атрибутами height и width
Хотя атрибуты height и width тега <img> могут улучшить производительность и позволить вам реализовать некоторые маленькие хитрости, но при их использовании есть некоторые сложные негативные эффекты. Даже если пользователь уже отключил функцию автоматической загрузки изображений, браузер все равно будет отображать пространство, отведенное для изображения, в指定的 размерах. И, как правило, это оставляет читателю пустую рамку, в которой есть бессмысленный значок, показывающий, что это место для изображения. В этом случае страница будет выглядеть очень плохо, как будто она вообще не завершена, и большая часть контента будет бесполезной. Если не использовать эти указанные размеры, то браузер просто поместит в текст значок изображения, и, по крайней мере, в этом случае будет что-то читать.
Для этой проблемы у нас еще нет решения, и мы можем только подчеркнуть, что нужно использовать атрибут altиОписаниеТаким образом, читатель по крайней мере knows, что здесь не хватает. Мы все же рекомендуем использовать эти свойства размеров, так как мы поощряем все, что может улучшить производительность сети.
