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 🙂

0 Shares:

Benimle yorumunu paylaş;

Bunlara da göz atabilirsin
CSS – ::selection – Seçili Metin
Devamını Oku

::selection – Seçili Metin

::selection sözde seçicisi ile mouse sol tuşuyla tıklanıp basılı tutarak seçilen metinlere nasıl stil verilebileceği anlatılmıştır. Söz dizimi ve nasıl yapılmasıyla ile ilgili detaylara yazımdan ulaşabilirsiniz

Devamını Oku