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.
See the Pen Css object-fit Kullanım Örnekleri by Furkan Giray (@furkangiray_com) on CodePen.
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 🙂
