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.com’da En boy oranlarını bozmadan boyutlandırma (CSS) veya diğer konular hakkında herhangi bir sorunuz varsa, sosyal medya butonları ile yorum ya da mesaj göndermekten çekinmeyin, En boy oranlarını bozmadan boyutlandırma (CSS) için ya da değil DM kapısı her daim açık. Yazıyı beğendiyseniz paylaşın, daha fazla ilgili gönderi için hemen aşağıdaki menülere göz gezdirebilirsiniz, okuduğunuz için teşekkürler, saygılar sevgiler.

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO - wolkanca mahallesi gmail sokak nokta com.