Масштабирование изображений в CSS
Одной из замечательных возможностей, которую нам добавили в CSS3 - является масштабирование изображений. Благодаря ей мы можем манипулировать изображением, как нам это будет нужно. CSS свойство, которое отвечает за масштабирование изображений, называется background-size. Данное свойство хорошо тем, что мы можем самостоятельно задавать нужный нам размер изображения, и можем использовать уже встроенные значения свойства. Начнем разбирать, какие значения мы можем использовать. Первое - это самостоятельно задавать размер изображения. Можно задавать различные единицы измерения, а какие - на Ваше усмотрение. Важно помнить, что при этом мы указываем два параметра без запятой, первый отвечает за ширину изображения, второй за высоту изображения. Если установить одно значение, то второе будет подобрано автоматически, с сохранением пропорций изображения. Осталось разобрать только значения, которые встроены в свойство background-size. Значение cover, означает, что изображение будет масштабировано таким образом, что его ширина и высота, будут равны ширине и высоте блока, в котором оно находится. Второе значение contain, означает, что изображение будет масштабировано в блоке с сохранением пропорций, которые браузер подберет самостоятельно. Осталось лишь рассмотреть пример использования свойства background-size:
<html>
<head>
<title>Масштабирование изображений</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div></div>
</body>
</html>
Масштабируем изображение:
div {
background: url("../images/orange.jpg") no-repeat;
background-size: cover;
width: 700px;
height: 300px;
}
После чего мы получим следующее:
Мы создали пустой блок, которому задали ширину и высоту, а также установили картинку, изначальная ширина которой равна 320 пикселей, а высота равна 240 пикселей, и применили значение cover, для свойства background-size. Благодаря этому значению, изображение стало шириной как блок, в котором оно находится, а именно 700 и 300 пикселей соответственно. Это лишь один пример использования данного свойства, однако советую вам протестировать все остальное, что я указывал выше. Если вы разберетесь в данном свойстве, оно Вам обязательно пригодится в дальнейшей работе. До скорого!
