Come mantenere le proporzioni utilizzando il tag HTML IMG

Question

Sto utilizzando un tag img di HTML per mostrare una foto nella nostra applicazione. Ho impostato sia l'altezza sia l'attributo width a 64. Devo mostrare qualsiasi risoluzione dell'immagine (ad esempio 256x256, 1024x768, 500x400, 205x246, ecc.) Come 64x64. Ma impostando gli attributi height e width di un tag img su 64, non viene mantenuto il rapporto aspetto, quindi l'immagine appare distorta.

Per il vostro riferimento il mio codice esatto è:

<img src="Runtime Path to photo" border="1" height="64" width="64"> 

Answer 1

Avvolgere l'immagine in un div con dimensioni 64x64 e impostare width: inherit all'immagine:

<div style="width: 64px; height: 64px;"> 
    <img src="Runtime path" style="width: inherit" /> 
</div> 

Answer 2

non impostare altezza e larghezza. Utilizzare l'uno o l'altro e verrà mantenuto il corretto rapporto d'aspetto.

.widthSet { 
 
    max-width: 100px; 
 
} 
 

 
.heightSet { 
 
    max-height: 100px; 
 
}

<img src="http://placehold.it/200x250" /> 
 

 
<img src="http://placehold.it/200x250" width="64" /> 
 

 
<img src="http://placehold.it/200x250" height="64" /> 
 

 
<img src="http://placehold.it/200x250" class="widthSet" /> 
 

 
<img src="http://placehold.it/200x250" class="heightSet" />

Answer 3

Perché non si utilizza un file CSS separato per mantenere l'altezza e la larghezza dell'immagine che si desidera visualizzare? In questo modo, è possibile fornire necessariamente la larghezza e l'altezza.

esempio:

 image { 
     width: 64px; 
     height: 64px; 
     } 

Answer 4

<img src="Runtime Path to photo" style="border: 1px solid #000; max-width:64px; max-height:64px;"> 

Answer 5

Impostare width e height delle immagini da auto, ma limitare sia max-width e max-height:

img { 
    max-width:64px; 
    max-height:64px; 
    width:auto; 
    height:auto; 
} 

Fiddle

Se si desidera visualizzare immagini di dimensioni arbitrarie nei "frame" 64x64px, è possibile utilizzare wrapper di blocchi in linea e posizionamento per essi, come in this fiddle.

Answer 6

Nessuno dei metodi elencati consente di ridimensionare l'immagine alla dimensione più grande possibile che si adatta a una casella pur mantenendo le proporzioni desiderate.

Questo non può essere fatto con il tag IMG (almeno non senza un po 'di JavaScript), ma si può fare come segue:

<div style="background:center no-repeat url(...);background-size:contain;width:...;height:..."></div> 

Answer 7

qui è il campione di uno

div{ 
 
    width: 200px; 
 
    height:200px; 
 
    border:solid 
 
} 
 

 
img{ 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: contain; 
 
    }

<div> 
 
    <img src="https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png"> 
 
</div>