Свойство height тега HTML <img>
Определение и использование
высота свойство определяет высоту изображения в пикселях.
Совет:Всегда указывайте высота и свойство widthЕсли установлены высота и ширина, то при загрузке страницы будет резервируется пространство для изображения. В противном случае, если этих свойств нет, браузер не знает размеров изображения и не может зарезервировать для него подходящее пространство. Это приведет к изменению макета страницы в процессе загрузки (при загрузке изображения).
Совет:использование высота и ширина Сокращение свойств изображения заставляет пользователей скачивать большое изображение (даже если оно выглядит很小 на странице). Чтобы избежать этого, пожалуйста, используйте программное обеспечение для обработки изображений, чтобы изменить размер изображения перед использованием его на странице.
Дополнительное чтение:Подробное описание атрибутов height и width
Пример
Изображение размером 600 на 500 пикселей:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Синтаксис
<img height="pixels">
Значение свойства
| Значение | Описание |
|---|---|
| pixels | Установите высоту изображения в пикселях (например, height="100"). |
Более примеров
Изменение размера изображения - Создание заполненных изображений
Свойства 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
Почему использовать атрибуты height и width?
Вы видели ли, как содержимое документа отображается нерегулярно при загрузке? Это происходит из-за того, что браузер постоянно корректирует макет страницы, чтобы показать каждое загруженное изображение. Браузер загружает и анализирует ширину и высоту изображения, чтобы определить его размер, затем оставляет соответствующий прямоугольник в окне отображения. Затем браузер корректирует макет страницы, чтобы inserting the image. Это также告诉我们, что изображения являются независимыми файлами и загружаются отдельно от исходных файлов.
Но это не самый эффективный способ отображения документа, потому что браузеру необходимо проверять каждый файл изображения и рассчитывать их экранное пространство перед отображением смежного и последующего содержимого документа. Это может значительно замедлить отображение документа, прерывая чтение пользователя.
Для создателей более эффективным методом является указание размеров изображения через атрибуты height и width тега <img>. Таким образом, браузер резервирует место для изображения перед его загрузкой, что ускоряет отображение документа и предотвращает смещение содержимого документа. Оба этих атрибута должны быть целыми числами и указывать размеры в пикселях. Порядок появления этих атрибутов в теге <img> не имеет значения.
Проблемы с атрибутами height и width
Хотя атрибуты height и width тега <img> могут улучшить производительность и позволить вам реализовать некоторые хитрости, при их использовании все же есть некоторые сложные негативные эффекты. Даже если пользователь уже отключил функцию автоматической загрузки изображений, браузер все равно будет отображать отведенное под изображение пространство с указанными размерами. Обычно это оставляет читателю пустую рамку, в которой находится безымянный значок, указывающий на место расположения изображения. В этом случае страница будет выглядеть очень плохо, как будто она не завершена, и большая часть содержимого становится бесполезной. Если не использовать указанные размеры, браузер просто поместит изображение в текст, что хотя бы позволяет прочитать текст.
Для этой проблемы у нас пока нет решения, мы можем только отметить, что рекомендуется использовать атрибут alt иОписание текстаТаким образом, читатель по крайней мере знает, что здесь отсутствует. Мы все же рекомендуем вам использовать эти свойства размеров,因为我们 поощряем все, что может улучшить производительность сети.
Поддержка браузеров
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Поддержка | Поддержка | Поддержка | Поддержка | Поддержка |
