Come modificare la dimensione dell'immagine nei CSS?
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.
