CSS3 ile görsel oranı koruyarak sığdırma

css, front-end

css’de kullandığımız background-size ve background-position özelliklerine benzer bir yapıyı img ve video etiketleri içerisinde kullanabileceğimiz özellik.

Gelen görseli kutuya sığdırmak için kullanılabilecek en etkili ve pratik çözümdür.

object-fit #

Yapısı : object-fit: [ deger ]
Aldığı Değerler : fill | contain | cover | none | scale-down
Başlangıç değeri: fill
Uygulanabilen elementler: yerine konabilir elementler
Kalıtsallık: Yok

object-fit özelliği, bir öğenin içerik kutusunun yüksekliğine ve genişliğine nasıl tepki verdiğini tanımlar.

object-position özelliği ile birlikte resimler, videolar vd. medya formatları için tasarlanmıştır. object-fit içerik kutusuna nesneyi en/boy oranını koruyarak, mümkün olduğunca uzatarak veya mümkün olduğunca fazla yer kaplayacak şekilde yerleştirmeyi sağlar.

Aldığı değerler

object-position #

object-position özelliği bir objenin içerik kutusundaki yerini ayarlamamızı sağlar.

Yapısı : object-position: [ deger ]
Aldığı Değerler : left | center | right | top | bottom | uzunluk değerleri | yüzde değerleri 
Başlangıç değeri: 50% 50%
Uygulanabilen elementler: yerine konabilir elementler
Kalıtsallık: Var

See the Pen object-fit öncesi by Fatih (@fatihhayri) on CodePen.

fatihhayrioglu.com/css-ile-resim-oranini-koruyarak-sigdirma/

– Kaynak