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

Lesezeit: 4 Minuten

Benutzer-Avatar
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

Benutzer-Avatar
Rübe

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

.widthSet {
    max-width: 64px;
}

.heightSet {
    max-height: 64px;
}
<img src="https://picsum.photos/200/250?grayscale" />

<img src="https://picsum.photos/200/250?grayscale" width="64" />

<img src="https://picsum.photos/200/250?grayscale" height="64" />

<img src="https://picsum.photos/200/250?grayscale" class="widthSet" />

<img src="https://picsum.photos/200/250?grayscale" class="heightSet" />

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.

img {
    width: 64px;
    height: 64px;
    border: 1px solid hotpink;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.scale-down {
  object-fit: scale-down;
}
<img src="https://picsum.photos/200/500?grayscale" class="fill" />

<img src="https://picsum.photos/200/500?grayscale" class="contain" />

<img src="https://picsum.photos/200/500?grayscale" class="cover" />

<img src="https://picsum.photos/200/500?grayscale" class="scale-down" />

  • … 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.

    – Königsberg

    31. Juli 2018 um 8:50 Uhr

Benutzer-Avatar
ACHIL P

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>

  • 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

    – Sean Dawson

    2. März 2016 um 2:56 Uhr


  • Jetzt auf Edge 16+ unterstützt, siehe Tabelle: w3schools.com/css/css3_object-fit.asp

    – Eddy R.

    2. Februar 2020 um 7:01 Uhr

Satz width und height der Bilder zu autoaber begrenzen Sie beides max-width und max-height:

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

Geige

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”.

    – Trade-Ideen Philip

    6. Juni 2021 um 17:45 Uhr

Benutzer-Avatar
Lucio Fonseca

<img src="https://stackoverflow.com/questions/12912048/Runtime Path to photo"
     style="border: 1px solid #000; max-width:64px; max-height:64px;">

Benutzer-Avatar
Ankit Kumar Verma

Verwenden object-fit: contain im CSS des HTML-Elements img.

ex:

img {
    ...
    object-fit: contain
    ...
}

Benutzer-Avatar
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:

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

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.

img {
  width: 100%;
  aspect-ratio: 16/9;
}

Es wird in allen weit verbreiteten Browsern unterstützt.
MDN-Link: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

Und https://web.dev/aspect-ratio/ enthält gute Beispiele für die Verwendung dieser Eigenschaft

  • Das ist, wonach ich gesucht habe. Segne modernes CSS!

    – Brad Turek

    14. Oktober 2021 um 5:21 Uhr

  • Dies sollte die neue akzeptierte Antwort sein

    – Lauheit

    23. Februar um 17:30 Uhr

1335000cookie-checkSo behalten Sie das Seitenverhältnis mit dem HTML-IMG-Tag bei

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy