<img> Tag
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Wenn Sie die Attribute width
und height
für <img>
-Tags festlegen, lassen sich Layoutverschiebungen verhindern. Anhand dieser Informationen kann der Browser die richtige Größe für das Bild reservieren.
Legen Sie die Attribute width
und height
fest:Die Werte dieser Attribute sollten so festgelegt werden, dass sie den Abmessungen des Bildes selbst (d. h. seiner systeminternen Größe) entsprechen, und nicht den Abmessungen, in denen das Bild angezeigt wird.
Bildstil nach Bedarf anpassen:Je nach vorhandenem Stil des Bilds kann das Hinzufügen von width
- und height
-Attributen dazu führen, dass das Bild anders gerendert wird. In vielen Fällen lässt sich das Problem beheben, indem Sie dem vorhandenen Stil height: auto
oder width: auto
hinzufügen.
Vorherige CSS-Stile |
Ändern zu |
img { width: 100%; } |
img { width: 100%; height: auto; } |
img { max-width: 100%; } |
img { max-width: 100% height: auto; } |
img { height: 100%; } |
img { height: 100%; width: auto } |
HTML
<img width="267" height="400" src="dog.jpg">
Sofern nicht anders angegeben, sind die Inhalte dieser Seite unter der Creative Commons Attribution 4.0 License und Codebeispiele unter der Apache 2.0 License lizenziert. Weitere Informationen finden Sie in den Websiterichtlinien von Google Developers. Java ist eine eingetragene Marke von Oracle und/oder seinen Partnern.
Zuletzt aktualisiert: 2024-03-13 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2024-03-13 (UTC)."],[],[]]