Ritagliare il centro di un'immagine con CSS: object-fit e un'altra storia

Ritagliare un'immagine in modo generico senza usare JavaScript è sempre stato un po' un grattacapo per me.
A prima vista, potrebbe sembrare semplice come definire un box più piccolo dell'immagine e aggiungere ` overflow:hidden` per nascondere tutto ciò che eccede le dimensioni del box. Tuttavia, ignorando il fatto che le immagini a volte sono più larghe che alte e altre volte il contrario, il primo ostacolo è che, mentre è facile ritagliare gli angoli usando ` position` , ottenere il centro esatto è complicato senza conoscere in anticipo le dimensioni dell'immagine.
Impostare queste dimensioni come sfondo del box e poi usare `background-position: 50% 50%` inizia a risolvere i problemi, ma ne sorgono di nuovi perché è necessario includerli nel CSS invece che nell'HTML... e questo accade anche con il più moderno `background-size` , che rappresenta un miglioramento rispetto al metodo precedente sotto diversi aspetti.
Ma fortunatamente, ci sono almeno un paio di altre alternative basate solo su CSS che sono piuttosto utili. Diamo un'occhiata.

adattamento all'oggetto

L'unico inconveniente di questa proprietà è che al momento è solo una raccomandazione e la sua compatibilità è limitata alle versioni più recenti dei principali browser. E nemmeno a tutte, a meno che IE non sia considerato un browser, cosa che alcuni daranno per scontata. Internet Explorer attualmente non la supporta in nessuno dei suoi aggiornamenti.
In pratica, `object-fit` adatta l'oggetto (un'immagine in questo caso) alle dimensioni che specifichiamo. Lo fa seguendo un certo schema basato sui diversi valori che può assumere: `fill` , `none` , `contain` , `scale-down` e `cover` .
Non fate troppe domande a riguardo perché conosco solo ciò che potete sperimentare e vedere qui sotto, e le spiegazioni sono una traduzione approssimativa di alcuni documenti che ho letto in inglese. Per ulteriori informazioni, consultate uno degli esperti di CSS .

Originale (250x150px e 150x250px)

riempire

img {larghezza: 100px; altezza: 100px; object-fit: fill;}

Questo è il valore predefinito e adatterà l'immagine al suo contenitore, riempiendolo completamente e visualizzando l'immagine intera, quindi la distorcerà se necessario modificandone il rapporto larghezza/altezza.

img {larghezza: 280px; altezza: 280px; object-fit: fill;}

nessuno

img {larghezza: 100px; altezza: 100px; adattamento oggetto: nessuno;}

L'immagine ignorerà l'altezza e la larghezza del suo contenitore e manterrà le sue dimensioni originali. A seconda che il contenitore sia più piccolo o più grande dell'immagine, l'immagine potrebbe apparire ritagliata o, in quest'ultimo caso, potrebbe non riempire completamente il contenitore in nessuna dimensione (notare lo sfondo grigio).

img {larghezza: 280px; altezza: 280px; adattamento oggetto: nessuno;}

contenere

img {larghezza: 100px; altezza: 100px; object-fit: contain;}

Le dimensioni dell'immagine vengono aumentate o diminuite senza modificarne le proporzioni, in modo che rientri completamente nel riquadro lungo la sua dimensione più lunga. Questo creerà degli "spazi vuoti" lungo la dimensione più corta.

img {larghezza: 280px; altezza: 280px; object-fit: contain;}

riduzione delle dimensioni

img {larghezza: 100px; altezza: 100px; adattamento oggetto: riduzione;}

Confronta i diversi risultati ottenuti con `none` e `contain` per scegliere quello con le dimensioni più piccole, in modo che l'immagine risultante non sia mai più grande dell'originale. In pratica, se il contenitore è più piccolo dell'immagine, l'effetto sarà lo stesso di `contain` , mentre se il contenitore è più grande, l'output sarà simile a quello di ` none` . Mantiene sempre le proporzioni dell'immagine originale.

img {larghezza: 280px; altezza: 280px; adattamento oggetto: riduzione scala;}

copertina

img {larghezza: 100px; altezza: 100px; object-fit: cover;}

L'immagine riempirà sia l'altezza che la larghezza del contenitore, mantenendone le proporzioni. Pertanto, se il contenitore non ha le stesse proporzioni del contenuto, verrà eseguito un ritaglio. L'immagine verrà ingrandita o ridotta di conseguenza, quindi con un'immagine troppo piccola, come quella nell'esempio, si otterrà un ritaglio di bassa qualità (pixelato).

img {larghezza: 280px; altezza: 280px; object-fit: cover;}

Questo sarebbe un breve riassunto degli effetti di ciascuno dei valori sopra indicati applicati all'adattamento dell'oggetto .

.
riempire
nessuno
contenere
riduzione delle dimensioni
copertina

Mantiene le proporzioni
NO
Sì
Sì
Sì
Sì

Immagine più grande dell'originale
Sì
NO
Sì
NO
Sì

Immagine più piccola dell'originale
Sì
NO
Sì
Sì
Sì

Ritagliare
NO
Sì
NO
NO
Sì

Come avrai notato, l'opzione migliore per ritagliare automaticamente il centro di un'immagine quando le sue dimensioni sono inizialmente sconosciute sarebbe object-fit: cover (utilizzando sempre un'immagine di qualità superiore rispetto a quelle che ho utilizzato per gli esempi).

L'altra storia

L'altro modo per ritagliare le immagini, sebbene il metodo precedente non sia valido per tutti i browser, è questo curioso effetto prodotto utilizzando il posizionamento assoluto dell'immagine con tutti i valori impostati a -100%, all'interno di un riquadro di dimensioni limitate. Non posso attribuirne il merito all'inventore perché l'ho visto su numerosi siti, il che suggerisce che non sia nulla di nuovo. Nello specifico,
consiste nell'avere queste due regole disponibili nel CSS e quindi semplicemente inserire ogni immagine da ritagliare all'interno di un div con la classe `crop`.

Ritaglio 100x100px

.crop {
posizione: relativa;
larghezza: 100px;
altezza: 100px;
overflow: nascosto;
}
.crop img {
posizione: assoluta;
alto: -100%;
basso: -100%;
sinistra: -100%;
destra: -100%;
margine: self;
altezza: self;
larghezza: self;
}

(*) A volte width: 100%; potrebbe funzionare meglio di width: auto; (vedi il commento di Jaume )

Ritaglio 280x280px

.crop {
posizione: relativa;
larghezza: 280px;
altezza: 280px;
overflow: nascosto;
}
.crop img {
posizione: assoluta;
...

Con questo sistema, ovviamente, se utilizziamo un'immagine più piccola (250x150 e 150x250) rispetto alla dimensione del ritaglio (280x280), poiché non avviene alcun ridimensionamento, verrà visualizzata per intero, in modo simile a quando in precedenza utilizzavamo object-fit: none .

Ma se ne utilizziamo un altro abbastanza grande (500x300 e 300x500), nessun problema.

fonte

Archivio Blogger

Cerca nel blog