41. Ширина, высота, рамка у изображений в HTML

В предыдущем уроке вы научились выравнивать изображения с помощью атрибута align. В этом уроке будем менять ширину и высоту изображений. А еще добавим рамку с помощью атрибута border.

Высота и ширина изображения. Атрибуты height и width

Атрибут height и width применяют для изменения высоты и ширины, соответственно. В нашем случае, применяют для изменения размера изображения. Измеряется размер в пикселях (px) или процентах (%).

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

Высоту и ширину можно менять в меньшую сторону, при этом качество изображения не пострадает, но изображение будет грузиться так же (размер изображения остается прежним). При изменении размера в большую сторону, качество может пострадать. У атрибутов height и width есть аналоги в CSS, которые мы изучим позднее. Далее пример использования атрибутов width и height:

<img src = "/img/site/logo.png" width = "100px" height = "100px"> 

Примечание (10.2024)

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

Рамка изображения. Атрибут border

Атрибут border добавляет рамку вокруг элемента, в нашем случае, вокруг картинки. Ширину рамки можно задать любой толщины. Далее пример:

<img src = "/img/site/logo.png" width = "100px" height = "100px" border = "10px"> 

Примечание (10.2024)

Атрибут border тоже устарел. На практике вы его использовать не будете. Примените только в рамках курса по HTML.

В этом уроке познакомились с атрибутами height, width и border. Как мы выяснили, они сильно устарели, не используются на практике и их можно легко заменить стилями CSS.

Примечание (10.2024). Зачем я оставил этот «бесполезный» урок?

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

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

Похожие уроки Codebra

1. Для изображения, которое вам дано, сделайте ширину (width) 50px

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.