CSS object-fit özelliği

CSS object-fit Özellik, <img> veya <video> boyutunu nasıl ayarlayacağını belirlemek için kullanılır.

Tarayıcı desteği

Tablo içindeki rakamlar, bu özelliği tamamen destekleyen ilk tarayıcı sürümünü belirtir.

Özellik Chrome IE Firefox Safari Opera
object-fit 31.0 16.0 36.0 7.1 19.0

CSS object-fit özelliği

CSS object-fit Özellik, <img> veya <video> boyutunu nasıl ayarlayacağını belirtmek için kullanılır.

Bu özellik, içeriğin kap suyu nasıl doldurulacağını farklı bir şekilde belirtir. Örneğin, 'Genişlik ve yükseklik oranını koru' veya 'Genişlet ve mümkün olduğunca fazla alan kapla'.

Shanghai Flower Port'tan gelen lilyum resmini aşağıdan görün, 300x300 piksel:

Lale

Ancak, eğer yukarıdaki resmi 200x300 piksel olarak ayarlıyorsanız, şu şekilde görünecektir:

Lale

Örnek

img {
  width: 200px;
  height: 300px;
}

Kişisel olarak deneyin

Görüyoruz ki, resim 200x300 piksel kapasitesine uyum sağlar ve orijinal genişlik ve yükseklik oranı bozulur.

Eğer object-fit: cover;Bu, resmin yanlarını keser, genişlik ve yükseklik oranını korur ve boşluğu doldurur, aşağıdaki gibi görünüyor:

Kahve

Örnek

img {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

Kişisel olarak deneyin

Bir diğer örnek

Burada, iki resim var ve browser penceresinin %50 genişliği ve %100 yüksekliğini doldurmak istiyoruz.

Aşağıdaki örnekte, biz object-fitBu nedenle, tarayıcı penceresini ayarladığımızda, resmin genişlik ve yükseklik oranını bozar:

Örnek

Kişisel olarak deneyin

Örnekte bir sonraki, biz object-fit: cover;Bu nedenle, tarayıcı penceresini ayarladığımızda, resmin genişlik ve yükseklik oranını korur:

Örnek

Kişisel olarak deneyin

CSS object-fit özelliğinin tüm değerleri

object-fit Özellik, aşağıdaki değerleri kabul eder:

  • fill - Varsayılan değer. Değiştirilmiş içeriğin boyutunu ayarlayın, elementin içerik kutusunu doldursun. Gerekirse, nesneyi genişlet veya sıkıştırarak bu nesneye uyum sağlayın.
  • contain - İçeriğin genişlik ve yükseklik oranını koruyarak değiştirilmiş içeriği genişletin ve elementin içerik kutusuna yerleştirin.
  • cover - İçerik kutusunun tüm içeriğini doldururken genişlik ve yükseklik oranını korumak için değiştirilmiş içeriğin boyutunu ayarlayın. Bu nesne, uyum sağlamak için kesilir.
  • none - Değiştirilen içeriği boyutlandırmaz.
  • scale-down - İçerik boyutunu belirtilmemiş gibi veya içerik içeren gibi ayarlayın (daha küçük belli nesne boyutlarına neden olur)

Aşağıdaki örnekler object-fit Özelliğin tüm olası değerleri:

Örnek

fill {object-fit: fill;}
contain {object-fit: contain;}
cover {object-fit: cover;}
scale-down {object-fit: scale-down;}
none {object-fit: none;}

Kişisel olarak deneyin