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

0

CSS3 ile resimleri oranını koruyarak kalitesini bozulmadan sığdırma işlemini nasıl yapabilirim?

CSS3 object-fit ve object-position nasıl kullanılır?

CSS3 object-fit aldığı değerler nelerdir?

CSS3 object-position aldığı değerler nelerdir?

ergin ergin (2515)
1 yıl önce sordu

Toplam 1 Cevap


1

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%;
}

 

ergin ergin (2515)
1 yıl önce cevaplandı

üyelik gerektirir

Cevap yazabilmek için üye girişi yapmalısınız.

Eğer uzmanim.net üyesiyseniz giriş yapabilirsiniz: üye girişi yap
uzmanim.net'e üye olmak çok kolaydır: hemen kayıt ol