So behalten Sie das Seitenverhältnis mit dem HTML-IMG-Tag bei
Lesezeit: 4 Minuten
Sunil Kumar
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 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.
Für Ihre Referenz ist mein genauer Code:
<img src="https://stackoverflow.com/questions/12912048/Runtime Path to photo" border="1" height="64" width="64">
Mögliches Duplikat von HTML/IE: Bild anpassen, Seitenverhältnis beibehalten
– Jonathon Reinhart
19. Februar 2015 um 5:37 Uhr
Im Jahr 2022 möchten Sie wahrscheinlich diese Antwort: stackoverflow.com/a/66618563/8806907 Das Seitenverhältnis wird von allem unterstützt, außer z. B.: developer.mozilla.org/en-US/docs/Web/CSS/…
– Lauheit
23. Februar um 17:32 Uhr
Rübe
Legen Sie nicht Höhe UND Breite fest. Verwenden Sie das eine oder andere und das korrekte Seitenverhältnis wird beibehalten.
Eine weitere Option, die Ihnen mehr Flexibilität bietet, ist die Verwendung object-fit. Dadurch können feste Abmessungen für die eingestellt werden img während das Bild selbst auf verschiedene Arten präsentiert werden kann innerhalb den definierten Bereich.
… aber was ist, wenn Sie sowohl Höhe als auch Breite festlegen möchten?
– Fatuhoku
7. September 2016 um 15:41 Uhr
Für dynamische Anwendungen macht dies keinen Sinn. Es ist nicht bekannt, ob die Breite oder Höhe 64 Pixel beträgt, da dies vom Seitenverhältnis des Bildes abhängt. Warum ist dies die positiv bewertete Antwort?
– Königsberg
31. Juli 2018 um 8:45 Uhr
@Mär Bei dieser Frage ging es um Bilder mit fester Breite und / oder Höhe. Reaktionsfähigkeit war keine Anforderung der Frage.
– Rübe
31. Juli 2018 um 8:48 Uhr
Die Größe ist festgelegt, das Seitenverhältnis nicht, da die Frage speziell darauf abzielte irgendein Bild von irgendein Auflösung. Einschließlich Auflösungen kleiner als 64×64.
Nur ein Hinweis für Leute, die diese Lösung verwenden möchten: Object-Fit wird von Browsern nicht sehr gut unterstützt. Es wird überhaupt nicht von IE oder Edge unterstützt. Quelle: caniuse.com/#feat=object-fit
Wenn Sie Bilder beliebiger Größe in den 64x64px “Frames” anzeigen möchten, können Sie Inline-Block-Wrapper und Positionierung für sie verwenden, z in dieser Geige.
Wird nicht über die Originalgröße hinaus skaliert, sondern nur unter die Originalgröße.
– Königsberg
31. Juli 2018 um 9:17 Uhr
Dies funktionierte, nachdem ich das übergeordnete Element in “Align-Items: Center” geändert hatte. Der Standardwert von “align-items: stretch” hatte Vorrang vor “max-height”.
Verwenden object-fit: contain im CSS des HTML-Elements img.
ex:
img {
...
object-fit: contain
...
}
Anonymer Feigling
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.
Das geht nicht mit dem IMG-Tag (zumindest nicht ohne ein bisschen JavaScript), aber es geht wie folgt:
Es gibt eine neue CSS-Eigenschaft aspect-ratio. Es legt ein bevorzugtes Seitenverhältnis für die Box fest, das bei der Berechnung von automatischen Größen und einigen anderen Layoutfunktionen verwendet wird.
Mögliches Duplikat von HTML/IE: Bild anpassen, Seitenverhältnis beibehalten
– Jonathon Reinhart
19. Februar 2015 um 5:37 Uhr
Im Jahr 2022 möchten Sie wahrscheinlich diese Antwort: stackoverflow.com/a/66618563/8806907 Das Seitenverhältnis wird von allem unterstützt, außer z. B.: developer.mozilla.org/en-US/docs/Web/CSS/…
– Lauheit
23. Februar um 17:32 Uhr