A volte è necessario adattare un'immagine a una determinata dimensione. Possiamo ridimensionare l'immagine specificando la larghezza e l'altezza di un'immagine. Una soluzione comune è utilizzare il file larghezza massima: 100%; E altezza: automatica; in modo che le immagini di grandi dimensioni non superino la larghezza del loro contenitore. IL larghezza massima E altezza massima proprietà dei CSS funzionano meglio, ma non sono supportate in molti browser.
Un altro modo per ridimensionare l'immagine è utilizzare il file adattamento all'oggetto proprietà , che si adatta all'immagine. Questa proprietà CSS specifica come viene ridimensionato un video o un'immagine per adattarlo alla casella del contenuto. Definisce come un elemento si inserisce nel contenitore con una larghezza e un'altezza stabilite.
IL adattamento all'oggetto la proprietà viene generalmente applicata all'immagine o al video. Questa proprietà definisce come un elemento risponde alla larghezza e all'altezza del suo contenitore. Principalmente ci sono cinque valori di adattamento all'oggetto proprietà come riempire, contenere, coprire, nessuno, ridurre, iniziale , E ereditare . Il valore predefinito di questa proprietà è 'riempire' .
Esempio
In questo esempio, stiamo ridimensionando l'immagine utilizzando il comando larghezza massima: 100%; E altezza: automatica; proprietà.
cell padding div { width: auto; text-align: center; padding: 15px; border: 3px solid red; } img { max-width: 100%; height: auto; } <img src="forest.webp"> Provalo adesso Produzione
Esempio
In questo esempio, stiamo utilizzando il file adattamento all'oggetto: copertura; proprietà.
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"> Provalo adesso Produzione
Nell'esempio sopra abbiamo utilizzato il file copertina valore del adattamento all'oggetto proprietà. Similmente all'esempio precedente, possiamo utilizzare gli altri valori di adattamento all'oggetto proprietà per ridimensionare l'immagine.
lupo contro volpe