Выравнивание изображения в контейнере при помощи CSS
Красивый и аккуратный дизайн сайта зачастую требует специально подготовленного контента, к примеру фотографий с заданным соотношением сторон.
Но не всегда есть возможность подготовить фотографии должным образом. Рассмотрим несколько способов вписать и выровнять картинку в заданной область при помощи CSS.
Напишем HTML:
<div class="image"> <img src="https://rufri.ru/storage/2022/01/mera.jpg"> </div>
Пропишем стили для контейнера:
.image {
width: 200px;
height: 200px;
border: 5px solid #515151;
margin: 1em 2em;
float: left;
}
1 cпособ: 100% width/height

Первый способ заключается в использовании значения 100%
для одного из параметров тега img
– ширины или высоты. При этом второй параметр должен быть установлен в auto
для сохранения пропорций изображения. Картинка растянется до размера контейнера по одному из измерений, а второе значение будет рассчитано автоматически. В результате по краям картинки могут образоваться поля, но она поместится в отведённой области целиком, без обрезки.
.image {
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.image img {
height: 100%;
width: auto;
}

.image {
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.image img {
min-height: 100%;
min-width: 100%;
flex-shrink: 0;
}
Так как при ширине 100% от ширины контейнера изображение вылезает за пределы этого контейнера по высоте, для обрезки лишнего используется свойство overflow
со значением hidden
. При этом, если мы хотим, чтобы в видимую область попала центральная часть изображения, его надо выровнять по центру контейнера. Проще всего это сделать задав контейнеру display: flex
, и далее позиционировать изображение по вертикали и горизонтали с помощью свойств justify-content
и align-items
.
Недостатком такого метода является то, что если часть изображений вытянута горизонтально, а часть вертикально, то одни из них заполнят область целиком, тогда как другие образуют поля.
Чтобы избавиться от полей можно заменить свойства width
и height
на min-width
и min-height
(при этом ширина и высота по умолчанию примут значения auto). Тогда вне зависимости от ориентации изображения, оно заполнит область целиком.
Важно: если вы используете выравнивание с помощью flex
, добавьте flex-shrink: 0
, чтобы запретить автоматическое масштабирование изображения.

Но хорошо работать это будет в случае, если исходное изображение меньше контейнера или незначительно отличается от него по размеру, так как в данном случае мы только растягиваем изображение при необходимости, но не уменьшаем его, если оно слишком большое.


Подобным образом можно вырезать только часть изображения, увеличивая или уменьшая масштаб изображения и контролируя смещение с помощью свойства margin
.
.image {
overflow: hidden;
}
.image img {
margin: -50% 0 0 -80%;
width: 200%;
height: auto;
}
2 cпособ : background-image
Другой способ вставки изображений – установка их в качестве фонового изображения блока. Этот способ попал сюда за то, что у фонового изображения есть свойство background-size
с двумя полезными значениями: contain
и cover
. Первое умещает изображение целиком с сохранением пропорций (и образованием полей), второе растягивает изображение таким образом, чтобы полей не осталось, также с сохранением пропорций и при необходимости обрезая лишнее.
.image {
background-image: url(/background.png);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}


3 cпособ: object-fit
.image img { object-fit: cover; object-position: 50% 50%; width: 100%; height: 100%; }
Этот способ похож на предыдущий, только не нужно делать изображение фоном. Свойство object-fit
применяется к самому изображению и имеет значения contain
и cover
, работающие аналогично таким же значениям свойства background-size
. При этом width
и height
нужно установить в 100%.
Свойство object-position
используется в сочетании с object-fit
и задаёт положение содержимого замещаемого элемента внутри контейнера относительно координатных осей X
и Y
. Значение по умолчанию 50% 50%
. Свойство анимируется. Не наследуется.
Как сделать обтекание картинки текстом в нижнем правом углу