Изменяет подгонку и положение изображения в контейнере, сохраняя соотношение сторон. Ранее возможно только с использованием фонового изображения и background-size свойства. Вы когда-нибудь хотели, чтобы изображение вписывалось точно в определенное заданное измерение, но сохраняя его пропорции и избегая получения сжатого изображения.
Это было не то, что легко можно сделать с помощью CSS в течение самого длительного времени. Одним из приемов было прибегнуть к использованию фонового изображения вместо того, чтобы обойти проблему.
HTML
Код
<img class="gakunkab kandus-vasulomeg" src="Ссылка на изображение №1" />
<img class="gakunkab kalods-maxetulok" src="Ссылка на изображение №2" />
CSS
Код
.gakunkab {
background: #34495e;
border: 1px solid #34495e;
width: 200px;
height: 200px;
}
.kandus-vasulomeg {
object-fit: contain;
object-position: center;
}
.kalods-maxetulok {
object-fit: cover;
object-position: right top;
}
object-fit: contain подходит для всего изображения в контейнере, сохраняя его пропорции.
object-fit: cover заполняет контейнер изображением, сохраняя его пропорции.
object-position: [x] [y] размещает изображение в контейнере.
Демонстрация
