Свойство object-position

Свойство object-position определяет позицию заполняемого элемента при использовании object-fit

object-position: center;

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

Значения

object-position: right top;

Используя ключевые слова, такие как top, right, bottom, left. Первый параметр - позиция по оси X, второй - позиция по оси Y

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

<style>
    .example-1 {
        width: 100%;
        height: 400px;
        background-color: #f0f0f0;
    }
    .example-1 img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: none;
        object-position: right top;
    }
</style>

object-position: 50% 50%;

Используя проценты, где 0% по оси X - левый край блока, а 100% - правый и 0% по оси Y - верхний край блока, а 100% - нижний. Первый параметр - позиция по оси X, второй - позиция по оси Y

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

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

object-position: 75px 30px;

Используя единицы измерения такие как px, em, rem, где начальная точка координат левый верхний угол блока. Первый параметр - позиция по оси X, второй - позиция по оси Y

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

<style>
    .example-3 {
        width: 100%;
        height: 400px;
        background-color: #f0f0f0;
    }
    .example-3 img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: none;
        object-position: 75px 30px;
    }
</style>

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

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

Свойство object-position