Ardalan resimler için uyguladığımız background-size ve background-position özelliklerine benzer bir kullanımı <img> ve <video> etiketleri içine uygulamamızı sağlayan özellikler.
Bu özelliğe ihtiyacımız çok eksilere dayanır. Görsel içeriğin kullanıcı tarafından girildiği sitelerde gelen resim boyutlarını istenen tasarımdaki içerik kutusuna sığdırma isteklerini karşılamak için bu özellikleri kullanırız. Bu özellik yaygınlaşmadan önce bu gibi ihtiyaçları karşılamak için resimleri ardalan resmine çevirip, background-size ve background-position ile halletmeye çalışırdım. Şimdi tarayıcı desktek oranları bayağı arttı ve artık kullanabiliriz.
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.
Örnek ile daha iyi anlayacağız.
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
Örneğin üye resmi, adı ve soyadının olduğu bir alanımız var.
Görüldüğü gibi normal şartlarda resimler büzülmüş görünecektir. object-fit: cover; tanımı yaptığımızda en/boy oranı korunduğu için büzülme düzelcektir, ancak şimdide resimlerin üste çok yakın olması sorunu vardır. Bunu da halletmek için object-position: 50% 15%; tanımı yaparsak isteidiğimize yakın bir sonuç elde etmiş oluruz.
Bu gibi bir çok durum için kullanışlı özellikler.
Tarayıcı Desteği
 |
 |
 |
|---|---|---|
| + | - | + |
Mobil Tarayıcılar
|
 |
 |
|---|---|---|
| + | + | + |
Kalın sağlıcakla.
## Kaynaklar
- https://css-tricks.com/on-object-fit-and-object-position/
- alligator.io/css/cropping-images-object-fit/
- https://www.sitepoint.com/using-css-object-fit-object-position-properties/
- https://tympanus.net/codrops/css_reference/object-fit/
- helloanselm.com/2013/fix-image-resizing-with-object-fit
- https://caniuse.com/#search=object-fit
- https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
- https://codepen.io/dudleystorey/pen/myPZwN
- https://codepen.io/jensimmons/pen/ZWRzjQ?limit=all&page=2&q=object-fit
- https://codepen.io/ntoye/pen/kXKaPE