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

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

• fill: En/boy oranına bakılmaksızın görüntüyü içerik kutusuna uyacak şekilde uzatan varsayılan değerdir.
• contain: En/boy oranını korurken kutuya doldurmak için duruma göre resmin boyutunu artırır veya azaltır.
• cover: Resim, en/boy oranını koruyarak ancak işlem sırasında resmi kırparak kutunun yüksekliğini ve genişliğini dolduracaktır.
• scale-down: Resim, en küçük somut nesne boyutunu bulmak için none ve contains arasındaki farkı karşılaştıracaktır ve uygun olanı uygulayacaktır.
• none: Resim orijinal halindeki boyutlarını korur ve içerik kutusu içine sığmaya çalışmaz. İçerik kutusundan taşan kısımlar kırpılır.

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