So behalten Sie das Seitenverhältnis mit HTML IMG-Tag

Question

Ich verwende ein HTML-Img-Tag, um ein Foto in unserer Anwendung zu zeigen. Ich habe sein Attribut Höhe und Breite auf 64 gesetzt. Ich muss jede Bildauflösung (z. B. 256 x 256, 1024 x 768, 500 x 400, 205 x 246 usw.) als 64 x 64 anzeigen. Wenn Sie jedoch die Attribute height und width eines img-Tags auf 64 setzen, wird das Seitenverhältnis nicht beibehalten, sodass das Bild verzerrt aussieht.

Als Referenz finden Sie meine genauen Code ist:

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

Answer 1

Wickeln Sie das Bild in einem div mit den Abmessungen 64x64 und setzen width: inherit auf dem Bild:

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

Answer 2

nicht festlegen Höhe und Breite. Verwenden Sie das eine oder das andere und das korrekte Seitenverhältnis wird beibehalten.

.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

Warum Sie keine separate CSS-Datei verwenden, um die Höhe und die Breite des Bildes, das Sie anzeigen möchten, halten? Auf diese Weise können Sie die Breite und Höhe unbedingt bereitstellen.

zB:

 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

Set width und height der Bilder zu auto, sondern begrenzen beide max-width und max-height:

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

Fiddle

Wenn Sie Bilder beliebiger Größe in den "64x64px" -Frames anzeigen möchten, können Sie Inline-Block-Wrapper und deren Positionierung verwenden, z. B. in this fiddle.

Answer 6

Keine der aufgelisteten Methoden skaliert das Bild auf die größtmögliche Größe, die in eine Box passt, während das gewünschte Seitenverhältnis beibehalten wird.

Dies kann nicht mit dem IMG-Tag (zumindest nicht ohne ein wenig JavaScript) durchgeführt werden, aber es kann wie folgt erfolgen:

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

Answer 7

hier die Probe eines

ist

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>