Ponekad je potrebno uklopiti sliku u određenu zadanu dimenziju. Veličinu slike možemo promijeniti određivanjem širine i visine slike. Uobičajeno rješenje je korištenje maksimalna širina: 100%; i visina: auto; tako da velike slike ne prelaze širinu svog spremnika. The maksimalna širina i max-visina svojstva CSS-a rade bolje, ali nisu podržana u mnogim preglednicima.
Drugi način promjene veličine slike je korištenje pristajanje objekta svojstvo , koje odgovara slici. Ovo CSS svojstvo određuje kako se veličina videozapisa ili slike mijenja da bi odgovarala okviru sadržaja. Definira kako se element uklapa u spremnik s utvrđenom širinom i visinom.
The pristajanje objekta svojstvo se općenito primjenjuje na sliku ili video. Ovo svojstvo definira kako element reagira na širinu i visinu svog spremnika. Uglavnom postoji pet vrijednosti pristajanje objekta imovine kao što je ispuniti, sadržavati, pokriti, ništa, smanjiti, početno , i naslijediti . Zadana vrijednost ovog svojstva je 'ispuniti' .
Primjer
U ovom primjeru mijenjamo veličinu slike pomoću maksimalna širina: 100%; i visina: auto; Svojstva.
cell padding div { width: auto; text-align: center; padding: 15px; border: 3px solid red; } img { max-width: 100%; height: auto; } <img src="forest.webp"> Testirajte sada Izlaz
Primjer
U ovom primjeru koristimo pristajanje objekta: naslovnica; vlasništvo.
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"> Testirajte sada Izlaz
U gornjem primjeru koristili smo pokriti vrijednost pristajanje objekta vlasništvo. Slično gornjem primjeru, možemo koristiti druge vrijednosti za pristajanje objekta svojstvo kako biste promijenili veličinu slike.