Понекад је потребно уклопити слику у одређену дату димензију. Можемо променити величину слике тако што ћемо одредити ширину и висину слике. Уобичајено решење је коришћење макс. ширина: 100%; и висина: ауто; тако да велике слике не прелазе ширину свог контејнера. Тхе максимална ширина и максимална висина својства ЦСС-а раде боље, али нису подржана у многим претраживачима.
Други начин промене величине слике је коришћење објектно уклапање својство, које одговара слици. Ово ЦСС својство одређује како се величина видеа или слике мења да би се уклопила у оквир садржаја. Дефинише како се елемент уклапа у контејнер са утврђеном ширином и висином.
Тхе објектно уклапање својство се углавном примењује на слику или видео. Ово својство дефинише како елемент реагује на ширину и висину свог контејнера. Углавном постоји пет вредности објектно уклапање имовине као што су испунити, садржати, покрити, ништа, смањити, почетни , и наследити . Подразумевана вредност овог својства је 'испунити' .
Пример
У овом примеру, ми мењамо величину слике помоћу макс. ширина: 100%; и висина: ауто; својства.
cell padding div { width: auto; text-align: center; padding: 15px; border: 3px solid red; } img { max-width: 100%; height: auto; } <img src="forest.webp"> Тестирајте одмах Излаз
Пример
У овом примеру користимо објекат-фит: поклопац; имовина.
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"> Тестирајте одмах Излаз
У горњем примеру користили смо поклопац вредност на објектно уклапање имовина. Слично као у горњем примеру, можемо користити и друге вредности објектно уклапање својство да бисте променили величину слике.