Responsive websitesi yaparken yaşadığımız en büyük zorluklardan birisi de imaj boyutlandırmaları olsa gerek. Kolay yoldan bunu küçük bi’ CSS kodu yardımıyla çözebiliyoruz:

[code lang=“css”] img { max-width: 100%; height: auto; } [/code]

Ama hepimizin de bildiği gibi bu çözüm pek yeterli olmuyor. Bazen, imajın elementin hepsini kaplamasını, bazen en boy oranını korumasını veya her responsive davranışta ortalı olmasını isteyebiliriz. Hadi onu geçtim iframe videolarında responsive olarak da sıkıntılarımız mevcut. Her ne kadar bu sıkıntıların çözümleri mevcut olsa da baş belası olabiliyor … Kısacası, responsive tasarımlarda imaj veya video gibi medya elementleri ile başımız sık sık derde giriyor ve kontrol zorlaşabiliyor.

İnternette araştırırken “object-fit” adı altında yardımcımızın olduğunu öğrendim, çok da mutlu oldum. Web sitesine arka plan imajını koyabilmek için “background-size” gibi yöntemler kullanırken artık “object-fit” ve aldığı değerler ile fantezilerimizi gerçekleştirebiliriz.

[code lang=“css”] img { /* En boy oranını koruyarak, element içerisine imajı boyutlandırıyor. */ object-fit: cover;

/* İmajın tamamını göstermek için genişlik ve yüksekliğine göre boyutlandırıyor. */ object-fit: contain;

/* En boy oranı korunmayarak element içerisinde imaj boyutlanıyor. */ object-fit: fill; } [/code]

Codepen üzerinde güzel de bir örnek buldum:

See the Pen CSS object-fit by Ibrahim Nergiz (@phyesix) on CodePen.

//assets.codepen.io/assets/embed/ei.js

Henüz yeni olduğundan browser konusunda da seçici davranıyor:

Browser	Destek
Internet Explorer	-
Google Chrome	v31+
Firefox	v36+
Safari OS X	7.1+
Safari iOS	8+
Opera	v19+