Как вывести картинку заданных размеров без искажений?
Для элемента <img> размеры картинки задаются с помощью атрибутов width и height.
<img src="image/redfox.jpg" alt="Лиса" width="500" height="286">Если оставить только один размер, к примеру, ширину равную 100%, то браузер высоту вычислит самостоятельно и выведет картинку с сохранением исходных пропорций.
<img src="image/redfox.jpg" alt="Лиса" width="100%">Размеры изображения можно установить и через стили. Для этого к <img> добавляем класс (назовём его hero) и для него пишем свойство width, как показано в примере 1.
Пример 1. Ширина изображения
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Изображение</title> <style> .hero { width: 100%; /* Ширина */ } </style> </head> <body> <img src="image/redfox.jpg" alt="Лиса" class="hero"> </body> </html>
Заметьте, что высота картинки здесь не указывается, поскольку для сохранения пропорций она вычисляется автоматически. Стоит только добавить свойство height с фиксированной величиной и картинка будет выводиться с искажениями (рис. 1).
Рис. 1. Размеры изображения 100% на 300px
Если требуется при гибкой ширине ограничить высоту изображения заданным размером и сохранить исходные пропорции картинки, то есть два метода:
- с помощью свойства object-fit;
- вывести изображение в виде фона через свойство background.
Использование свойства object-fit
Свойство object-fit применяется для масштабирования картинки, ограниченной заданными размерами. Значение cover у этого свойства заставляет изображение полностью заполнить область указанных размеров при сохранении пропорций картинки (пример 2).
Пример 2. Ширина и высота изображения
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Изображение</title> <style> .hero { width: 100%; /* Ширина */ height: 300px; /* Высота */ object-fit: cover; /* Изображение вписывается в вышеуказанные размеры */ } </style> </head> <body> <img src="image/redfox.jpg" alt="Лиса" class="hero"> </body> </html>
Центр картинки при масштабировании по умолчанию остаётся в центре области. Не для всех изображений это является подходящим, поэтому с помощью свойства object-position можно задать выравнивание картинки относительно её края (пример 3).
Пример 3. Использование object-position
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Изображение</title> <style> .hero { width: 100%; /* Ширина */ height: 300px; /* Высота */ object-fit: cover; /* Изображение вписывается в размеры */ object-position: center top; /* Положение изображения */ } </style> </head> <body> <img src="image/redfox.jpg" alt="Лиса" class="hero"> </body> </html> Использование свойства background
Картинку можно вывести не через элемент <img>, а как фон с помощью свойства background. Для этого добавляется пустой элемент <div> с классом hero и для него все параметры определяются через стили (пример 4).
Пример 4. Картинка через фон
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Изображение</title> <style> .hero { width: 100%; /* Ширина */ height: 300px; /* Высота */ background: url(/example/image/redfox.jpg) center top / cover; } </style> </head> <body> <div class="hero"></div> </body> </html>
Здесь функция url() показывает адрес изображения, параметр center top определяет положение фона, а cover говорит что фон заполняет всю область.
Автор: Влад Мержевич
Источник: webref.ru