Questi esempi mostrano un po' di cose carine che si possono fare con CSS alle immagini.
Questa immagine non ha stile, e viene mostrata con le sue dimensioni reali, senza ridimensionamenti, tagli, o centraggi vari.
Questa immagine ha una larghezza fissa di 40rem, l'altezza è calcolata automaticamente per non stirare l'immagine.
Questa immagine riempie il 100% della larghezza del suo elemento genitore (in questo caso, la finestra del browser), fino a una larghezza massima di 40rem. L'altezza è calcolata automaticamente per non stirare l'immagine. Ridimensiona la finestra per vedere come si comporta.
Questa immagine si comporta come quella sopra, ma è anche centrata orizzontalmente nel suo elemento genitore (in questo caso, la finestra del browser).
Aggiungiamo uno spazio (padding) di 0.5rem attorno all'immagine e un bordo sottile nero attorno ad esso.
Forse ti sei accorto che con questa cornicetta esce dalla finestra e viene mostrata una barra di scorrimento orizzontale. Aggiungendo box-sizing:border-box; possiamo evitarlo. Con questa dichiarazione, il browser calcola la larghezza corretta per l'immagine tenendo conto della presenza del padding e del border che abbiamo messo.
Di default, un'img è un inline-block, per cui un'immagine si comporta come se fosse un carattere di testo, per cui possiamo metterle una di fianco all'altra. Aggiungendo un margine tra loro, possiamo distanziarle.
filter:blur(raggio); aggiunge una sfocatura del raggio specificato (in questo esempio il raggio è 0.2rem)
filter:saturate(num%); aumenta o riduce la saturazione dell'immagine (0% = bianco e nero)
filter:brightness(num%); aumenta o riduce la luminosità dell'immagine
Ce ne sono molti altri...