Piccolo trucco per cambiare le dimensioni del rapporto delle immagini.
Diciamo che abbiamo un’immagine con un rapporto di 1:1 e vogliamo cambiarla in un rapporto di 16:9.
Calcolare la dimensione del ritaglio
Prima calcola quante dimensioni devi ritagliare dall’immagine:
9/16= 56.25(%) /*dimensione percentuale dell’immagine dopo il ritaglio*/
100-56.25 =43.75(%) /*valore percentuale del ritaglio */
44 / 2 = 21.875(%) /*ogni lato*/
Base HTML & CSS
HTML
<figure>
<img src="image-name.jpg">
</figure>
CSS
figure{
width:300px; /*container-width*/
overflow:hidden; /*hide bounds of image */
margin:0; /*reset margin of figure tag*/
}
figure img{
display:block; /*remove inline-block spaces*/
width:100%; /*make image streatch*/
}
Aggiungi stili di ritaglio
Ora basta aggiungere margine negativo all’immagine
figure img{
/*add to other styles*/
margin:-21.875% 0;
}
DEMO VIVO
Secondo metodo, Aggiungi altezza
Ora facciamo il contrario. Diciamo che abbiamo un’immagine con un rapporto di 16:9 e vogliamo cambiarla in un rapporto di 1:1.
Calcolare le dimensioni aggiuntive
- 16/9 = 1.7777 /*dimensione mancante per il rapporto 1:1*/
- 1.777 * 100 = 177.77(%) /*dimensione dell’immagine prima del ritaglio*/
- 177.77-100 = 77.77 /*dimensione aggiuntiva che sarà ritagliata*/
- 77.77/2 = 38.885(%) /*dimensione aggiuntiva che sarà ritagliata per ogni dimensione*/
Base HTML & CSS
HTML
<figure>
<img src="image-name2.jpg">
</figure>
CSS
figure{
width:300px; /*container-width*/
overflow: hidden; /*hide bounds of image */
margin:0; /*reset margin of figure tag*/
}
figure img{
display:block; /*remove inline-block spaces*/
}
Aggiungi stili di ritaglio
figure img{
/*add to other styles*/
margin:0 -38.885%;
width:177.777%;
}
DEMO LIVE
Questo è tutto, spero ti piaccia.
Altri messaggi CSS che ho scritto:
CSS Position Sticky – Come funziona veramente!
Nuove proprietà logiche CSS!
La nuova evoluzione del Responsive Design
Architettura CSS per siti web multipli con SASS
I metodi CSS Grid
Diventare un Ninja della Griglia CSS!
Video, Canali e Playlist CSS consigliati
Seguimi su:
Il mio Twitter
La mia azienda
Puoi trovarmi nei miei gruppi facebook:
CSS Masters
CSS Masters Israel