Css Object Fit Kullanımı

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.

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link