Web sayfalarında görselleri boyutlandırdığımızda eğer en/boy oranı aynı değil ise görsel çok kötü şekilde görünebilir. Bunu engellemek için ya en boy oranına göre bir boyut seçmek gerekiyor ya da vereceğim bu CSS örneğinde olduğu gibi “object-fit: cover;” etiketini kullanarak sorunsuz kullanabiliriz.
Kullanım şu şekilde:
img{
height: 200px;
width: 200px;
object-fit: cover;
}Ayrıca object-position: kullanarak görselin kırpılacağı yeri seçebilirsiniz örneğin object-position: top; yaptığınızda görsel alt kısımdan kesilip üst kısmı hizalayacaktır.
Canlı örnek şu şekilde:
Daha fazla bilgi için: