<img> Tag

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">