CSS Dersleri: object-fit

CSS Dersleri: object-fit

CSS

CSS Dersleri: object-fit

Merhaba dostlar, Siberdefter‘e hoş geldiniz. Bugün CSS Dersleri‘nde “object-fit” teriminden bahsediyor olacağız. CSS’te object-fit nedir, CSS’te object-fit kullanımı, CSS “object-fit” ne işe yarar? Bu sorulara yanıt bulacaksınız.

Öncelikle biraz İngilizce’ye sahipseniz bu niteliğin neye yaradığını okuyarak anlarsınız. “object-fit” bir objeyi orantılamak için kullandığımız niteliktir. Genellikle resimlerde kullandığımız bu nitelik iki değer ile çalışır.

  • Birinci seçenek; object-fit: cover;
  • İkinci seçenek; object-fit: contain;

Cover dediğimiz zaman görsel belirlediğimiz alana sığdırılır, bu bağlamda görselimize biraz yakınlaştırma eklenmiş olacak. Örnek vermem gerekirse; 400×200 değerlerine sahip bir alana 120×159 değerlerine sahip bir görsel yerleştireceğiz.

object-fit: cover;

Bu kullanımı yaptığımız zaman görselin genişliği 400px, yüksekliği ise 200px olacak ve alana sığdırılacak. Genelde “cover” değerini kullanırız ve daha iyi bir görünüm elde ederiz.

object-fit: contain;

Bu kullanımı yaptığımız zaman ise görsel ortalanır. Yüksekliğinde veya genişliğinde herhangi bir değişim yaşanmaz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir