CSS3 ile resimleri oranını koruyarak sığdırma işlemi nasıl yapılır?

CSS3 object-fit özelliği <img> ve <video> gibi medya taglarinde kullanabildiğimiz resimlerin ekrandaki alanlarında taşma veya sığmama gibi birçok probleme çözüm olarak kullanılmaktadır.

Aldığı değelere bakıcak olursak;

• none : Resim orijinal halinde kalır kutudan taşan kısımlar kesilir.
• fill : Resmi en boy oranı korunmayarak, element içerisinde uzatarak imaj boyutlandırır.
• cover : Resmi en boy oranını koruyarak, element içerisinde imajı boyutlandırır.
• contain : Resmin tamamını göstermek için genişlik ve yüksekliğine kutu boyutuna göre boyutlandırır.
• scale-down : Resimin none ve contains arasındaki farkı karşılaştırıp ve uygun olanı kullanır.

CSS

img { 
  border: 1px solid black;
  margin: 1%;
}

section img {
  width: 200px;
  height: 200px;
  background: #eee;
}

section.none img {
  object-fit: none;
}

section.fill img {
  object-fit: fill;
}

section.cover img {
  object-fit: cover;
}

section.contain img {
  object-fit: contain;
}

section.scale-down img {
  object-fit: scale-down;
}

CSS3 object-position özelliğini objelerin içerek kutusundaki yerini ayarlamak için kullanılır. 

Aldığı değerler : left, center, right, top, bottom, uzunluk, yüzde değeri

CSS

img {
  width: 100px;
  height: 100px;
  border-radius: 5%;
  border: 1px solid #black;
  object-fit: cover;
  object-position: 50% 50%;
}