Bazen bir görüntüyü belli bir boyuta sığdırmak gerekebilir. Bir görselin genişliğini ve yüksekliğini belirterek görseli yeniden boyutlandırabiliriz. Yaygın bir çözüm, maksimum genişlik: %100; Ve yükseklik: otomatik; böylece büyük görseller bulundukları kabın genişliğini aşmaz. maksimum genişlik Ve maksimum yükseklik CSS'nin özellikleri daha iyi çalışır ancak birçok tarayıcıda desteklenmez.

Resmi yeniden boyutlandırmanın başka bir yolu da nesneye uygun görüntüye uyan özellik. Bu CSS özelliği, bir videonun veya görselin içerik kutusuna sığacak şekilde nasıl yeniden boyutlandırılacağını belirtir. Bir elemanın belirlenmiş bir genişlik ve yüksekliğe sahip kaba nasıl sığacağını tanımlar.

nesneye uygun özelliği genellikle görüntüye veya videoya uygulanır. Bu özellik, bir öğenin kapsayıcısının genişliğine ve yüksekliğine nasıl yanıt vereceğini tanımlar. Temel olarak beş değer vardır nesneye uygun gibi mülk doldur, içer, kapat, yok, küçült, başlangıç , Ve miras aldın . Bu özelliğin varsayılan değeri 'doldurmak' .

java pgm

Örnek

Bu örnekte, görüntüyü yeniden boyutlandırıyoruz. maksimum genişlik: %100; Ve yükseklik: otomatik; özellikler.

 cell padding div { width: auto; text-align: center; padding: 15px; border: 3px solid red; } img { max-width: 100%; height: auto; } <img src="forest.webp"> 

Çıktı

Örnek

Bu örnekte, şunu kullanıyoruz: nesne uyumu: kapak; mülk.

 div { width: 300px; height: auto; text-align: center; padding: 15px; border: 3px solid red; } img { object-fit: cover; } <img src="forest.webp" width="300" height="300"> 

Çıktı

Yukarıdaki örnekte, şunu kullandık: kapak değeri nesneye uygun mülk. Yukarıdaki örneğe benzer şekilde diğer değerleri de kullanabiliriz. nesneye uygun Resmi yeniden boyutlandırmak için özellik.