Včasih je potrebno sliko prilagoditi določeni dani dimenziji. Velikost slike lahko spremenimo tako, da določimo širino in višino slike. Običajna rešitev je uporaba največja širina: 100 %; in višina: avto; tako da velike slike ne presegajo širine svojega vsebnika. The največja širina in največja višina lastnosti CSS delujejo bolje, vendar niso podprte v mnogih brskalnikih.
Drug način spreminjanja velikosti slike je uporaba prileganje objektu lastnost , ki ustreza sliki. Ta lastnost CSS določa, kako se spremeni velikost videoposnetka ali slike, da se prilega polju z vsebino. Določa, kako se element prilega vsebniku z določeno širino in višino.
The prileganje objektu lastnost se običajno uporablja za sliko ali video. Ta lastnost določa, kako se element odziva na širino in višino vsebnika. V glavnem obstaja pet vrednosti prileganje objektu premoženje, kot je npr fill, contain, cover, none, scale-down, začetnica , in dedovati . Privzeta vrednost te lastnosti je 'fill' .
Primer
V tem primeru spreminjamo velikost slike z uporabo največja širina: 100 %; in višina: avto; lastnosti.
cell padding div { width: auto; text-align: center; padding: 15px; border: 3px solid red; } img { max-width: 100%; height: auto; } <img src="forest.webp"> Preizkusite zdaj Izhod
Primer
V tem primeru uporabljamo prileganje predmetu: pokrov; premoženje.
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"> Preizkusite zdaj Izhod
V zgornjem primeru smo uporabili pokrov vrednost prileganje objektu premoženje. Podobno kot v zgornjem primeru lahko uporabimo druge vrednosti prileganje objektu lastnost, da spremenite velikost slike.