Kategoriler
Kodlama

En boy oranlarını bozmadan boyutlandırma [CSS]

CSS object-fit: cover; ile görselleri en boy oranını bozmadan eşit olarak boyutlandırmak.

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:

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO volkan@volkanyilmaz.com.tr