CSS Lastnost: object-position

Lastnost object-position se uporablja skupaj z object-fit, da se določi, kako naj bo slika ali video nameščen s koordinatami x/y znotraj njegovega lastnega okvirja.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>object-position</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        * {
            box-sizing: border-box;
        }
        img {
            width: 300px;
            height: 250px;
            border: 1px solid black;
        }
        img.contain {
            object-fit: contain;
            /* 10px levo, 50px zgoraj */
            object-position: 10px 50px;
        }
        img.cover {
            object-fit: cover;
            object-position: 20px 20px;
        }
        img.fill {
            object-fit: fill;
            /* -10px desno, -50px spodaj */
            object-position: -10px -50px;
        }
        img.none {
            object-fit: none;
            object-position: 10px -10px;
        }
        img.unset {
            object-fit: unset;
            object-position: 10px 50px;
        }
        img.scaleDown {
            object-fit: scale-down;
            object-position: 0 25px;
        }
        img.initial {
            object-fit: initial;
            object-position: 0 0;
        }
    </style>
</head>
<body>
<h3>object-fit: contain;<br>object-position: 10px 50px;</h3>
<img src="/demo/smiley.png" alt="Smeško" class="contain">

<h3>object-fit: cover;<br>object-position: 20px 20px;</h3>
<img src="/demo/smiley.png" alt="Smeško" class="cover">

<h3>object-fit: fill;<br>object-position: -10px -50px;</h3>
<img src="/demo/smiley.png" alt="Smeško" class="fill">

<h3>object-fit: none;<br>object-position: 10px -10px;</h3>
<img src="/demo/smiley.png" alt="Smeško" class="none">

<h3>object-fit: unset;<br>object-position: 10px 50px;</h3>
<img src="/demo/smiley.png" alt="Smeško" class="unset">

<h3>object-fit: scale-down;<br>object-position: 0 25px;</h3>
<img src="/demo/smiley.png" alt="Smeško" class="scaleDown">

<h3>object-fit: initial;<br>object-position: 0 0;</h3>
<img src="/demo/smiley.png" alt="Smeško" class="initial">
</body>
</html>

REZULTAT