So pflegen Sie das Seitenverhältnis mithilfe des HTML-IMG-Tags

132

Ich verwende ein img-Tag von HTML, um ein Foto in unserer Anwendung anzuzeigen. Ich habe sowohl das Höhen- als auch das Breitenattribut auf 64 festgelegt. 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 Höhen- und Breitenattribute eines img-Tags auf 64 setzen, wird das Seitenverhältnis nicht beibehalten, sodass das Bild verzerrt aussieht.

Als Referenz lautet mein genauer Code:

<img src="Runtime Path to photo" border="1" height="64" width="64">
html css Sunil Kumar
quelle
Mögliches Duplikat von HTML / IE: Bild strecken, Seitenverhältnis beibehalten
Jonathon Reinhart
Chridam, es ist lange her, dass ich diese Frage gestellt habe. Ich habe die Firma verlassen, in der ich für dieses Problem gearbeitet habe. Ich konnte die vorgeschlagenen Lösungen nicht ausprobieren, da ich an anderen Prioritäten arbeitete, um die Fristen zu diesem Zeitpunkt einzuhalten. Ich konnte keine Chance bekommen, weitere Fortschritte zu machen.
Sunil Kumar

Antworten:

133

Stellen Sie nicht Höhe UND Breite ein. Verwenden Sie das eine oder andere und das richtige Seitenverhältnis wird beibehalten.

.widthSet {
    max-width: 64px;
}

.heightSet {
    max-height: 64px;
}
<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" />
Erweitern Sie das Snippet

Steckrübe
quelle
14
... aber was ist, wenn Sie sowohl Höhe als auch Breite korrigieren möchten?
Fatuhoku
7
Dies macht für dynamische Anwendungen keinen Sinn. Es ist nicht bekannt, ob Breite oder Höhe 64 Pixel betragen, da dies vom Verhältnis des Bildes abhängt. Warum ist dies die positiv bewertete Antwort?
Königsberg
@ Mär Bei dieser Frage ging es um Bilder mit fester Breite und / oder Höhe. Reaktionsfähigkeit war keine Voraussetzung für die Frage.
Rübe
3
Die Größe ist fest, das Seitenverhältnis nicht, da es sich speziell um ein Bild mit einer Auflösung handelt. Einschließlich Auflösungen kleiner als 64x64.
Königsberg
65

Hier ist das Beispiel

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>
Erweitern Sie das Snippet

AKHIL P.
quelle
8
Nur ein Hinweis für Leute, die diese Lösung verwenden möchten: Die Objektanpassung wird von Browsern nicht sehr gut unterstützt. Es wird von IE oder Edge überhaupt nicht unterstützt. Quelle: caniuse.com/#feat=object-fit
Sean Dawson
1
Jetzt unterstützt auf Edge 16+, siehe Tabelle: w3schools.com/css/css3_object-fit.asp
Eddy R.
44

Setze widthund heightder Bilder auf auto, aber beschränke beide max-widthund max-height:

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

Geige

Wenn Sie Bilder beliebiger Größe in den 64 x 64 Pixel großen "Frames" anzeigen möchten, können Sie Inline-Block-Wrapper verwenden und diese wie in dieser Geige positionieren .

Ilya Streltsyn
quelle
3
Skaliert nicht über die Originalgröße hinaus, sondern nur unter die Originalgröße.
Königsberg
40 
<img src="Runtime Path to photo"
     style="border: 1px solid #000; max-width:64px; max-height:64px;">
Lucio Fonseca
quelle
2
Dies ist die richtige Lösung, da sie weiterhin unabhängig von der Ausrichtung des Bildes ist. Für die Lösung von 3rror404 müssen Sie wissen, ob das Bild breiter als hoch ist oder umgekehrt.
Devios1
2
auch setzen widthund heightzu auto.
Mahmoodvcs
Richtige Lösung, um sowohl Höhe als auch Breite einzuschränken.
Pavan Kumar
1
Ein Bild wird dadurch ordnungsgemäß eingeschränkt , jedoch nicht über seine ursprüngliche Größe hinaus skaliert. Aus dem Eröffnungsposten ist jedoch nicht sicher, welchen der beiden das OP wollte.
Königsberg
14

Keine der aufgeführten 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 ist mit dem IMG-Tag nicht möglich (zumindest nicht ohne ein bisschen JavaScript), kann aber wie folgt geschehen:

 <div style="background:center no-repeat url(...);background-size:contain;width:...;height:..."></div>
Anonymer Feigling
quelle
2
Ja. Verwenden Sie style="background: url('_'); background-size: cover width:_px height:_px"für das <img>Tag.
Ujjwal Singh
3
Danke, @UjjwalSingh. In der Tat müssen wir covernicht contain, um die Bildgröße auf das größtmögliche zu maximieren. containführt zu "Letterboxing".
Ortwin Gentz
4

Verwenden Sie das object-fit: containAttribut in in CSS von HTML img.

Ankit Kumar Verma
quelle
3

Wickeln Sie das Bild in ein Bild divmit den Abmessungen 64x64 und stellen Sie es width: inheritauf das Bild ein: 

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

Warum verwenden Sie keine separate CSS-Datei, um die Höhe und Breite des anzuzeigenden Bildes beizubehalten? Auf diese Weise können Sie die erforderliche Breite und Höhe angeben.

z.B: 

       image {
       width: 64px;
       height: 64px;
       }
Sahan De Silva
quelle
1

Versuche dies:

<img src="Runtime Path to photo" border="1" height="64" width="64" object-fit="cover">

Durch Hinzufügen von object-fit = "cover" wird das Bild gezwungen, den Platz einzunehmen, ohne das Seitenverhältnis zu verlieren.

Nick Friesen
quelle