Как изменить размер картинки в HTML

В этой статье мы поговорим о нескольких вариантах изменения размеров картинки в HTML. Для тех, кто только начинает изучать html будет полезно прочитать статью про вывод картинок на странице: HTML тег <img>.

Изменять размер изображения полезно в нескольких случаях:

  • Браузер сможет сразу при загрузке страницы сделать правильный масштаб страницы и контент не будет прыгать. Например, все содержимое html-страницы уже загрузилось, а картинка пока еще нет. В этом случае после загрузки картинки она сместит весь контент ниже. Такое может происходить чаще всего с мобильных устройств, но в любом случае это будет выглядеть некрасиво.
  • Просто уменьшить размер картинки, поскольку ширина области не позволяет вывести такое большое изображение.

Для изменения размеров картинки html существует два способа:

  • Через атрибуты width и height в теге <img>
  • Через свойства CSS width:N px и height:N px

Например

<html>
<head>
<style>
img.wdth{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
Через атрибуты width и height:
<img width="100px" height="100px" src="kartinka.jpg">
Через свойства CSS:
<img class="wdth" src="kartinka.jpg">
</body>
</html>

В обоих случаях результат примера будет одинаковый: картинка будет 100 пикселей на 100 пикселей.

Примечание

Если не задавать размеры изображения, то она будет выведена в тех размерах, какие есть. Также можно сказать, что если указаны размеры (или только один размер), то картинка будет в пропорции изменена до того размера, который указан. Например, изображение 500х300 пикселей. Если мы укажем ширину в 100 пикселей, то высота картинки изменится пропорционально и составит 60 пикселей (в 5 раз меньше).




Читайте также:

• HTML тег <table> – подробное описание с примерами

• Свойство background CSS

• Свойство position в CSS

• <!DOCTYPE> в html

• Meta viewport

• Meta charset

• Как убрать рамку вокруг картинки в html

← Перейти в каталог html уроков и советов

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.