css object-position nedir? Nasıl Kullanılır?

css object-position özelliği, object-fit ile yeniden boyutlandırılmış Html elementinin konum özelliklerini belirlemek için kullanılır.

Aldığı değerler :
top : Üst değeri
right : Sağ değeri
bottom : Alt değeri
left : Sol değeri
lenghth : Uzunluk değeri
% : Yüzde değeri
initial : Varsayılan değere döner.

Kullanım şekli :
object-fit : deger;
object-position : yatay-deger dikey-deger;

Varsayılan değer center center şeklidedir. Bu resim veya video dikey ve yatay da ortadan konumlandırılsın demektir. İstersek konumlandırmayı değiştirebiliriz. top ve left yazarsak elementin üst ve sol kısmından başlayarak hizalar, bottom ve left yazarsak alt ve sol kısımdan başlayarak konumlandırır.

Örnek:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div {            
            margin-bottom: 5px;      
        }
        div img{
            width: 200px;
            height: 150px;    
        }        
        .one img  { object-fit: none; }
        .one img:last-child   { object-position: top left; }

        .two img   { object-fit: fill; }
        .two img:last-child   { object-position: center center; }

        .three img { object-fit: cover; }
        .three img:last-child   { object-position: top center; }

        .four img  { object-fit: contain; }  
        .four img:last-child   { object-position: top right; }

        .five img  { object-fit: scale-down; } 
        .five img:last-child   { object-position: 50% 50%; }
    </style>
</head>
<body>
    <div class="one">
        <img src="./images/css-clip-path.jpg" alt="css object-fit" srcset="">
        <img src="./images/css-clip-path.jpg" alt="object-position" srcset="">
    </div>
    <div class="two">
       <img src="./images/css-clip-path.jpg" alt="css object-fit" srcset="">
       <img src="./images/css-clip-path.jpg" alt="object-position" srcset="">
    </div>
    <div class="three">
        <img src="./images/css-clip-path.jpg" alt="css object-fit" srcset="">
        <img src="./images/css-clip-path.jpg" alt="object-position" srcset="">
    </div>
    <div class="four">
        <img src="./images/css-clip-path.jpg" alt="css object-fit" srcset="">
        <img src="./images/css-clip-path.jpg" alt="object-position" srcset="">
    </div>   
    <div class="five">
        <img src="./images/css-clip-path.jpg" alt="css object-fit" srcset="">
        <img src="./images/css-clip-path.jpg" alt="object-position" srcset="">
    </div>  
</body>
</html>

Html çıktısı:

css object-position kullanımı

Başka bir yazımızda görüşmek üzere…

Leave a Reply