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

css object-fit özelliği, html de boyutları belirlenmiş elemanın içerisine sığmayacak kadar olan resim veya video nun boyutlandırma özelliklerini belirlemek için kullanırız.

Aldığı değerler:
none : Resim veya video nun boyutlarını korunarak element içerisine sığmayan kısımlar kırparız.
fill : Resim veya video nun boyutlarını korumadan element içine sığdırmak için kullanırız.
cover : Resim veya video nun boyutlarını korunarak element içerisine sığacak şekilde kırparız veya uzatırız.
contain : Resim veya video nun boyutlarını korunarak element içerisine sığacak şekilde yeniden boyut veririz.
scale-down : Resim veya video nun en uygun boyutlandırmasını bulmak için contain ve none kıyaslayarak uygun olanı seçer.
initial : Varsayılan değere döner.

Ö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; }
        .two img   { object-fit: fill; }
        .three img { object-fit: cover; }
        .four img  { object-fit: contain; }  
        .five img  { object-fit: scale-down; } 
    </style>
</head>
<body>
    <div class="one">
        <img src="./images/css-clip-path.jpg" alt="css object-fit" srcset="">
    </div>
    <div class="two">
       <img src="./images/css-clip-path.jpg" alt="css object-fit" srcset="">
    </div>
    <div class="three">
        <img src="./images/css-clip-path.jpg" alt="css object-fit" srcset="">
    </div>
    <div class="four">
        <img src="./images/css-clip-path.jpg" alt="css object-fit" srcset="">
    </div>   
    <div class="five">
        <img src="./images/css-clip-path.jpg" alt="css object-fit" srcset="">
    </div>  
</body>
</html>

Html çıktısı: