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
widthundheightfest: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- undheight-Attributen dazu führen, dass das Bild anders gerendert wird. In vielen Fällen lässt sich das Problem beheben, indem Sie dem vorhandenen Stilheight: autooderwidth: autohinzufü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">