Свойство object-fit

Свойство object-fit определяет, как содержимое заменяемого элемента, такого как img, video, embed, iframe, должно заполнять контейнер относительно его высоты и ширины.

Работает схоже как свойство background-size для фоновых изображений.

object-fit: cover;

поддерживается начиная с
частичная поддержка до
не поддерживается

Значения

object-fit: fill;

Элемент полностью заполняет область объекта не соблюдая пропорции

<div class="example-1">
    <img src="https://htmlbase.ru/storage/app/media/travel-mobile.jpg" alt="">
</div>

<style>
    .example-1 {
        width: 100%;
        height: 200px;
        background-color: #f0f0f0;
    }
    .example-1 img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: fill;
    }
</style>

object-fit: contain;

Элемент заполняет объект так, чтобы подстроится под область внутри блока пропорционально собственным параметрам

<div class="example-2">
    <img src="https://htmlbase.ru/storage/app/media/travel-mobile.jpg" alt="">
</div>

<style>
    .example-2 {
        width: 100%;
        height: 200px;
        background-color: #f0f0f0;
    }
    .example-2 img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
</style>

object-fit: cover;

Элемент меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока

<div class="example-3">
    <img src="https://htmlbase.ru/storage/app/media/travel-mobile.jpg" alt="">
</div>

<style>
    .example-3 {
        width: 100%;
        height: 200px;
        background-color: #f0f0f0;
    }
    .example-3 img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>

object-fit: none;

Элемент не изменяет свой размер с целью заполнить пространство блока

<div class="example-4">
    <img src="https://htmlbase.ru/storage/app/media/travel-mobile.jpg" alt="">
</div>

<style>
    .example-4 {
        width: 100%;
        height: 200px;
        background-color: #f0f0f0;
    }
    .example-4 img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: none;
    }
</style>

object-fit: scale-down;

Элемент изменяет размер, сравнивая разницу между none и contain, для того, чтобы найти наименьший конкретный размер объекта

<div class="example-5">
    <img src="https://htmlbase.ru/storage/app/media/travel-mobile.jpg" alt="">
</div>

<style>
    .example-5 {
        width: 100%;
        height: 200px;
        background-color: #f0f0f0;
    }
    .example-5 img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: scale-down;
    }
</style>

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии

Свойство object-fit

Значения

Читайте также

Обсуждение (0)