Bu yazımızda Css’te object-fit özelliği nedir?, nasıl kullanabiliriz? onu öğreneceğiz. Object fit özelliği, resim veya videolarımızı ebeveyn etiketleri içerisinde uygun bir şekilde boyutlandırmamızı sağlar.
5 değer verebiliyoruz. Bunlar;
► contain : Resmin genişlik ve yükseklik değerlerinden büyük olanı, uygulandığı etiketi kapsayacak şekilde yerleştirilir. Diğer küçük olanıda buna göre en boy oranı bozulmayacak şekilde değişir.
► cover : Resmin genişlik ve yükseklik değerlerinden küçük olanı, uygulandığı etiketi kapsayacak şekilde yerleştirilir. Diğer küçük olanıda buna göre en boy oranı bozulmayacak şekilde değişir.
► fill : Varsayılan değerdir. Resim içerisinde bulunduğu nesneyi tamamen kaplar. En boy oranı korunmayacağı için görüntü bozulur.
► none : Resmin orjinal boyutları korunur ve ebeveyn etiketinden taşan kısımlar kırpılır.
► scale-down : Resmin en küçük boyutunu bulmak için none ve contain karşılaştırılması yapılır. Küçük olan uygulanır.
Şimdi bu değerleri örnekler üzerinde inceleyelim.
Bir resmimiz var ve orjinal boyutları 400×296 px.
Her resmi bir div etiketi içerisine yerleştirelim ve div’e 280px genişlik, 400px yükseklik, kırmızı bir kenarlık verelim.
Resmin boyutunda herhangi bir değişiklik yapmadan nasıl göründüğüne bakalım. Sonra da resmin boyutlarını 280×400 px yaparak object-fit özelliğini uygulayalım.
TARAYICI DESTEĞİ
| Özellik | Chrome | IE | Firefox | Safari | Opera |
| object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
Bu tabloda tarayıcıların object-fit özelliğini hangi versiyon ile birlikte sorunsuz desteklemeye başladığını görebilirsiniz.
Tarayıcı uyumluluğu ile ilgili daha kapsamlı ve güncel bilgi almak isterseniz caniuse sitesini ziyaret edebilirsiniz.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
