Css Object Fit Kullanımı

Merhaba Arkadaşlar,
Bu makalede 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 herhanagi 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.

Tarayıcı Desteği

ÖzellikChromeIEFirefoxSafariOpera
object-fit31.016.036.07.119.0

Bu resimde 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.

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 33 – Flex Kullanımı

Sonraki : Css Dersleri 35 – Ölçü Birimleri

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +