41. Ширина, высота, рамка у изображений в HTML
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
В предыдущем уроке вы научились выравнивать изображения с помощью атрибута 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">
Для доступа необходимо авторизоваться на сайте Codebra.
Примечание (10.2024)Атрибут
border
тоже устарел. На практике вы его использовать не будете. Примените только в рамках курса по HTML.
В этом уроке познакомились с атрибутами height
, width
и border
. Как мы выяснили, они сильно устарели, не используются на практике и их можно легко заменить стилями CSS.
Примечание (10.2024). Зачем я оставил этот «бесполезный» урок?На мой взгляд вы получите некоторые базовые навыки, которые в дальнейшем упростят понимание более сложных тем.
В следующем уроке вы научитесь добавлять альтернативный текст (атрибут alt
) для изображений. Этот атрибут вы не замените свойствами CSS, поэтому отнеситесь к нему серьезно.
Похожие уроки Codebra
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
- Для изображения, которое вам дано, сделайте ширину (
width
)50px
– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.
– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.
Это займет не больше минуты.