HTML атрибут width img
определение и использование
width атрибут определяет ширину изображения в пикселях.
Совет:указать для изображения height и width атрибуты — это хорошая привычка. Если эти атрибуты установлены, они могут резервировать место для изображения при загрузке страницы. Если их нет, браузер не может понять размер изображения и не может резервировать подходящее место, поэтому при загрузке изображения структура страницы может измениться. (Ниже подробно объясняется этот момент).
Совет:не следует использовать height и width атрибут для масштабирования изображения. Если использовать height и width Если использовать атрибут для уменьшения изображения, то пользователю придётся скачивать изображения с большой容量 (даже если изображение выглядит очень маленьким на странице). Правильный подход — обработать изображение до подходящего размера с помощью программного обеспечения до его использования на веб-странице.
Дополнительное чтение:Подробное описание атрибутов height и width
Пример
Изображение с высотой 600 пикселей и шириной 500 пикселей:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Грамматика
<img width="пиксели">
Значение атрибута
| Значение | Описание |
|---|---|
| пиксели | Определение ширины изображения в пикселях (например, width="100"). |
Более примеров
Изменение размера изображения - Создание заполненных изображений
У свойств height и width есть скрытое свойство, что люди не должны указывать фактический размер изображения, то есть, эти значения могут быть больше или меньше фактического размера. Браузер автоматически масштабирует изображение, чтобы оно соответствовало预留ленному пространству. С помощью этого метода можно легко создавать miniature изображений для больших изображений и увеличивать очень маленькие изображения. Но需要注意: браузер все равно должен загрузить весь файл, независимо от того,多么大 размер он в конечном итоге будет отображать, и, если не поддерживать его исходные пропорции ширины и высоты, изображение будет искажаться.
Другая хитрость использования свойств height и width заключается в том, что их можно очень легко использовать для заполнения области страницы, а также для улучшения производительности документа. Представьте себе, если бы вы хотели поместить в документ цветную полоску. Вам не нужно создавать изображение с полным размером, напротив, вам нужно создать изображение с шириной и высотой в один пиксель и назначить ему цвет, который вы хотите использовать. Затем используйте свойства 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" />
Когда размер окна документа изменяется, размер этого изображения также изменяется:
Совет:Если был предоставлен размер width в виде процента и忽略了 height, то, как бы ни увеличивал или уменьшал браузер изображение, он будет поддерживать пропорцию высоты и ширины изображения. Это означает, что соотношение высоты к ширине изображения не изменится, и изображение не будет искажаться.
Пожалуйста, посмотрите на следующий HTML:
<img src="/i/ct_1px.gif"} width="20%" />
Таким образом, если установить только процентное значение атрибута width изображения ct_1px.gif, вы получите прямоугольное изображение (потому что исходный ct_1px.gif - это прямоугольник с шириной и высотой 1 пиксель):
Совет:Цель предоставления вышеуказанных примеров - помочь вам лучше понять использование атрибутов height и width. Если вам нужно大面积的单色块来 украсить страницу, лучше всегоИспользование CSS для создания фона.
Подробное описание атрибутов height и width
Почему использовать атрибуты height и width
Вы видели ли, как содержимое документа перемещается нерегулярно при загрузке? Это происходит из-за того, что браузер постоянно корректирует макет страницы, чтобы отображать каждое загруженное изображение. Браузер загружает и анализирует ширину и высоту изображения, чтобы определить его размер, затем оставляет соответствующий прямоугольник в окне отображения. Затем браузер корректирует макет страницы, чтобы inserting the image into the display. Это также告诉我们, что изображения являются независимыми файлами и загружаются отдельно от исходных файлов.
Но это не самый эффективный способ отображения документа, потому что браузеру нужно проверять каждый файл изображения и рассчитывать их экранное пространство перед тем, как он начнет отображать相邻ное и последующее содержимое документа. Это может значительно задержать отображение документа, что может прервать чтение пользователя.
Для создателей более эффективным методом является использование атрибутов height и width тега <img> для указания размеров изображения. Таким образом, браузер резервирует место для изображения до его загрузки, что ускоряет отображение документа и предотвращает перемещение содержимого документа. Оба эти атрибута должны быть целочисленными и выражены в пикселях. Порядок появления этих атрибутов в теге <img> не имеет значения.
Проблемы с атрибутами height и width
Хотя атрибуты height и width тега <img> могут улучшить производительность и позволить вам реализовать некоторые маленькие хитрости, но при их использовании есть некоторые сложные негативные эффекты. Даже если пользователь уже отключил функцию автоматической загрузки изображений, браузер все равно будет отображать пространство, отведенное для изображения, в指定的 размере. Обычно это оставляет читателю пустую рамку, в которой есть бесполезный значок, указывающий на место расположения изображения. В этом случае страница будет выглядеть очень плохо, как будто она не завершена, и большая часть содержимого будет бесполезной. Если не использовать эти指定的 размеры, браузер просто поместит изображение-иконку в текст, что, по крайней мере, оставляет возможность чтения некоторых текстов.
Для этой проблемы у нас пока нет решения, мы можем только подчеркнуть, что следует использовать атрибут alt иОписаниеТаким образом, читатель по крайней мере knows, что здесь отсутствует. Мы все еще рекомендуем использовать эти свойства размеров, потому что мы поощряем все, что может улучшить производительность сети.
Поддержка браузеров
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Поддержка | Поддержка | Поддержка | Поддержка | Поддержка |
