Как изменить размер картинки в 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 уроков и советов