De vegades, cal encaixar una imatge en una determinada dimensió. Podem canviar la mida de la imatge especificant l'amplada i l'alçada d'una imatge. Una solució comuna és utilitzar el amplada màxima: 100%; i alçada: automàtica; perquè les imatges grans no superin l'amplada del seu contenidor. El amplada màxima i alçada màxima Les propietats de CSS funcionen millor, però no són compatibles amb molts navegadors.
Una altra manera de canviar la mida de la imatge és mitjançant l' ajust d'objecte propietat , que s'ajusta a la imatge. Aquesta propietat CSS especifica com es canvia la mida d'un vídeo o d'una imatge per adaptar-se al seu quadre de contingut. Defineix com encaixa un element al contenidor amb una amplada i alçada establertes.
El ajust d'objecte La propietat s'aplica generalment a la imatge o al vídeo. Aquesta propietat defineix com respon un element a l'amplada i l'alçada del seu contenidor. Principalment hi ha cinc valors de ajust d'objecte propietat com ara omplir, contenir, cobrir, cap, rebaixar, inicial , i heretar . El valor per defecte d'aquesta propietat és 'omplir' .
Exemple
En aquest exemple, estem canviant la mida de la imatge utilitzant el amplada màxima: 100%; i alçada: automàtica; propietats.
cell padding div { width: auto; text-align: center; padding: 15px; border: 3px solid red; } img { max-width: 100%; height: auto; } <img src="forest.webp"> Prova-ho ara Sortida
Exemple
En aquest exemple, estem utilitzant el ajust d'objecte: coberta; propietat.
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"> Prova-ho ara Sortida
En l'exemple anterior, hem utilitzat el coberta valor de la ajust d'objecte propietat. De manera similar a l'exemple anterior, podem utilitzar els altres valors de la ajust d'objecte propietat per canviar la mida de la imatge.