So dehnen Sie ein Bild horizontal mit CSS

Eine Möglichkeit, einem Bild neues digitales Leben einzuhauchen, ist die Änderung seiner Breite. Sie können dies mit einem Bildeditor tun, aber CSS kann die Arbeit oft schneller erledigen. Erfahren Sie, wie Sie einem Bild eine CSS-Referenz hinzufügen, und Sie können es horizontal auf jede gewünschte Breite strecken. Mit Cascading Style Sheets haben Sie die Möglichkeit, schnell neue Looks für Ihre Geschäftswebseiten auszuprobieren, da Sie sie sofort auf Elemente in Ihrer gesamten Site anwenden können, wobei nur ein paar einfache Zeilen verwendet werden.

1

Öffnen Sie ein HTML-Dokument mit einem Bild und suchen Sie den Abschnitt des Dokuments. Fügen Sie den unten gezeigten Code in diesen Abschnitt ein.

Dieser Code erstellt eine CSS-Klasse mit dem Namen stretchX. Mit dem Wert des Parameters width (400px) können Browser jedes Element festlegen, das auf die Klasse mit einer Breite von 400 Pixel verweist. Außerdem wird eine Klasse mit dem Namen stretchXY erstellt, die Werte für Breite und Höhe enthält.

2

Wechseln Sie zum Abschnitt Ihres Dokuments und suchen Sie nach einem img-Tag, das ein Bild definiert. Es sieht ähnlich wie das unten gezeigte Beispiel aus:

4

Speichern Sie Ihr Dokument und zeigen Sie es in einem Browser an. Die Breite des Bildes beträgt 400 Pixel, da dies der in der stretchX-CSS-Klasse definierte Wert ist. Kehren Sie zu Ihrem Dokument zurück und ändern Sie 400 in einen anderen Wert, um das Bild auf diese Breite zu strecken.

Tipps

  • Sie können 200px auch in der CSS-Klasse durch einen Prozentwert wie 300% ersetzen. Auf diese Weise können Sie ein Bild um einen Prozentsatz statt um einen Pixelbetrag strecken.
  • Wenn Ihr img-Tag bereits eine Klassenreferenz enthält, hängen Sie Ihren Klassennamen an den vorhandenen Klassennamen an, der in der Attributdefinition angezeigt wird. Wenn zum Beispiel das aktuelle img-Tag mit beginnt
  • Ersetzen Sie die Referenz des img-Tags auf „stretchX“ durch „stretchXY“, wenn Sie die Breite und Höhe des Bildes ändern möchten. Wenn Sie dies tun, passen Sie die Werte für Breite und Höhe in der stretchXY-Klasse an, um die gewünschte Bildbreite und -höhe auf Ihrer Webseite zu erreichen.
  • Experimentieren Sie mit dem Dehnen von Bildern auf Firmenlogos oder anderen Bildern, die Text enthalten. Möglicherweise entdecken Sie einen neuen ansprechenden Look, der besser funktioniert als der vorhandene.
  • Jedes Mal, wenn Sie die Abmessungen eines Bildes mit CSS erhöhen, nimmt die Bildqualität ab. Dies ist bei kleinen Anstiegen möglicherweise nicht spürbar, kann jedoch problematisch werden, wenn Sie Ihre Bilder zu groß machen. Überprüfen Sie Ihre verkleinerten Bilder sorgfältig, bevor Sie sie ins Web stellen.