Ridimensiona l’immagine proporzionalmente con i CSS?

C’è un modo per ridimensionare (ridimensionare) le immagini in proporzione usando SOLO CSS?

Sto facendo il modo JavaScript, ma sto solo cercando di vedere se questo è ansible con i CSS.

Per ridimensionare l’immagine in proporzione usando il CSS:

 img.resize { width:540px; /* you can use % */ height: auto; } 

Controlla le dimensioni e mantieni la proporzione:

 #your-img { height: auto; width: auto; max-width: 300px; max-height: 300px; } 

Se si tratta di un’immagine di sfondo, usa la dimensione dello sfondo: contiene.

Esempio css:

 #your-div { background: url('image.jpg') no-repeat; background-size:contain; } 

Provare

 transform: scale(0.5, 0.5); -ms-transform: scale(0.5, 0.5); -webkit-transform: scale(0.5, 0.5); 

Notare che la width:50% la ridimensiona al 50% dello spazio disponibile per l’immagine, mentre la max-width:50% ridimensiona l’immagine al 50% della sua dimensione naturale . Questo è molto importante da tenere in considerazione quando si usano queste regole per il web design mobile, quindi per il web design mobile si consiglia di utilizzare sempre la max-width .

Per ridimensionare un’immagine mantenendo le sue proporzioni

Prova questo,

 img { max-width:100%; height:auto; } 

Puoi usare la proprietà object-fit :

 .my-image { width: 100px; height: 100px; object-fit: contain; } 

Ciò si adatta all’immagine, senza modificare proporzionalmente.

Rivisitato nel 2015:

  

L’ho rivisitato poiché tutti i browser più comuni ora hanno un’automobile funzionante suggerita da Cherif sopra, quindi funziona ancora meglio, poiché non è necessario sapere se l’immagine è più ampia di quella più alta.

versione precedente: se sei limitato da una scatola di 120×100, ad esempio puoi farlo

  

Le proprietà css max-width e max-height funzionano alla grande , ma non sono supportate da IE6 e credo che IE7. Si vorrebbe usare questa altezza / larghezza in modo da non ridimensionare accidentalmente un’immagine. Vorresti solo limitare l’altezza / larghezza massima in proporzione.

  

ha funzionato bene per me https://stackoverflow.com/questions/787839/resize-image-proportionally-with-css/… o mi sto perdendo qualcosa?

Edit: Ma vedi il caveat di Shawn sull’incrementare accidentalmente.

Usa questa semplice tecnica di ridimensionamento

 img { max-width: 100%; height: auto; } @media { img { width: auto; /* for ie 8 */ } } 
 img{ max-width:100%; object-fit: scale-down; } 

per me va bene. Ridimensiona le immagini più grandi per adattarle alla scatola, ma lascia le immagini più piccole alla loro dimensione originale.

 img { max-width:100%; } div { width:100px; } 

con questo frammento puoi farlo in un modo più efficiente

Possiamo ridimensionare l’immagine utilizzando i CSS nel browser utilizzando le query multimediali e il principio del design reattivo.

  @media screen and (orientation: portrait) { img.ri { max-width: 80%; } } 
 @media screen and (orientation: landscape) { img.ri { max-height: 80%; } } 

Hai sempre bisogno di qualcosa del genere

 html { width: 100%; height: 100%; } 

nella parte superiore del tuo file css

Prova questo:

 div.container { max-width: 200px;//real picture size max-height: 100px; } /* resize images */ div.container img { width: 100%; height: auto; } 

image_tag("/icons/icon.gif", height: '32', width: '32') Ho bisogno di impostare height: ’50px’, width: ’50px’ al tag immagine e questo codice funziona dal primo tentativo nota I ho provato tutto il codice sopra ma non ho fortuna, quindi questo funziona e qui è il mio codice dal mio _nav.html.erb:
<%= image_tag("#{current_user.image}", height: '50px', width: '50px') %>

Credo che questo sia il modo più semplice per farlo, anche utilizzando l’attributo di style inline all’interno del tag .

 .scaled { transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */ }  

o