Css ile Resim Boyutlandırma | object-fit

Merhabalar, Bugün css in object-fit özelliğinden biraz bahsetmek istiyorum. Türkçe kaynaklarda rastlayamadığım için yardımı olacağını düşünüyorum. Aslında web yazılımı geliştirenlerin sıklıkla yaşadığı bir sorun fotoğrafları istenilen yere göre istenilen şekilde boyutlandırmak. Çoğumuz bunu photoshopta boyutlandırıp öyle ekliyoruz ama buna gerçekten gerek var mı ? Css’in object-fit özelliği kullanarak bunları standartlaştırabiliriz. Hangi boyutta fotoğraf yüklersek yükleyelim istenilen yerde nasıl gözükmesini istiyorsak birkaç satır kodla bunu kolay bir şekilde halledebiliriz.

object-fit ile bir resim ya da fotoğrafın verilen yükseklik ve genişlik değerlerine göre nasıl bir tepki vereceğini tanımlayabiliriz.

object-fit alttaki beş değerden biriyle tanımlayabiliriz;

• fill En boy oranına bakılmaksızın görüntüyü belirtilen yükseklik ve genişlik değerine göre yayar.
  object-fit : fill;
• contain En boy oranını korur ve görüntüyü belirtilen yükseklik ve genişlik değerine göre görüntüyü boyutlandırır.
  object-fit : contain ;
• cover Görüntünün genişlik değerini yayar ve yükseklik değerindeki artan kısımları kırpar.
  object-fit : cover;
• none Yüksekliği ve genişliği yok sayar ve orjinal boyutunu korur artan kısımları ise kırpar.
  object-fit : none;
• scale-down contain ve none özelliklerinin birleşimi olarak da görülebilir. Resmin en boy oranını koruyarak ve boyutlandırmadan, belirtilen yükseklik ve genişlik değerine göre resmi konumlandırır.
  object-fit : scale-down;

Kod örneğini https://codepen.io/merveagca/pen/owGjbO linkinden inceleyebilirsiniz.