object-fit Kullanımı

Css’ de oldukça işe yarayan object-fit özelliği bir medya öğesinin verilen yüksekliğine ve genişliğine göre nasıl tepki vereceğini tanımlar. Detaylar için yazımı inceleyebilirsiniz.

Merhabalar,

Bu yazımda Css’ de çok bilinmeyen ama oldukça işe yaradığını düşündüğüm object-fit özelliğinden bahsedeceğim. İlk defa duyanlar için tanımlayacak olursak;

Object-fit özelliği, bir medya öğesinin verilen yüksekliğine ve genişliğine nasıl tepki vereceğini tanımlar.

Tek başına kullanıldığında, bir öğenin boyutlandırma ve kırpma gibi gösterim şekli konularında bize büyük bir kontrol sağlama avantajı veriyor.

Yükseklik ve genişliğini belirlediğiniz alana eklediğiniz medya öğesinin o alanı;

  • Kapsamasını (cover),
  • Kendi netliğini koruyacak şekilde konumlanmasını (contain),
  • O alanı tamamen doldurmasını (fill)
  • Bir de çok kullanılmasa da resmin en küçük boyutunu bulmak için none ve contain karşılaştırılması yapıp küçük olanı kullanımını (scale-down)

sağlayabiliyorsunuz.

Bir yandan konumlandırma ve aynı şekilde gösterim şeklini ayarlamak için Css ile background  kullanıyorduk ki tanımladığımız background’ a background-size ile boyutlandırmasını, background-position ile de pozisyonunu ayarlayabilelim.

Artık img etiketiyle eklediğimiz görsele de pozisyon ve konumlandırma değerlerini object-fit ve object-position ile verebiliyoruz.  

Birkaç örnek ile öğrendiklerimizi pekiştirip, object-fit özelliğinin nasıl çalıştığını kavrayalım.

Siteye eklediğiniz görselleri verilen yüksekliğe ve genişliğe göre boyutlandırma oldukça işinize yarayacak ve işinizi kolaylaştıracak bir özelliktir. Bu yüzden ihtiyaç duymanız halinde object-fit özelliğiyle sık karşılaşıp tasarımınıza göre farklı değerlerini kullanabilirsiniz. Umarım işinize yaramıştır.

Mutlu Kodlamalar 🙂

1 Shares:

Benimle yorumunu paylaş;

Bunlara da göz atabilirsin
Bu yazımda css 'de scroll-behavior ile scroll (kaydırma) işlevine verilen yumuşak bir kaydırma özelliğinden bahsettim.
Devamını Oku

scroll-behavior Özelliği

Bu yazımda css 'de scroll-behavior ile scroll (kaydırma) işlevine verilen yumuşak bir kaydırma özelliğinden bahsettim. Sitenize eklemek isterseniz yazımın devamını okuyabilirsiniz.

Devamını Oku