Bild in HTML an Tab anpassen?

2 Antworten

regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, CSS, Programmieren & Softwareentwicklung
01.01.2023, 07:45

Du kannst dein Bild mittels des CSS-Properties max-height und einer relativen Größenangabe in seiner maximalen Höhe beschränken.

Angenommen, auf deiner Seite gibt es nur ein Bild, welches im obersten Viewport (Höhe und Breite des Browserfensters) liegen soll. Dann könnte man die maximale Höhe auf 100vh setzen. Wenn das Browserfenster auf der y-Achse verkleinert wird, skaliert das Bild mit.

Das lässt sich ebenso auf die maximale Breite ausweiten (max-width mit 100vw).
AntwortVonYusuf
31.12.2022, 16:19

Ich gebe dir paar Codes, die kannst du ausprobieren:

1.
<img src="bild.jpg" width="100%">

2.
<img src="bild.jpg" width="100%" height="100%">

3.
img {
  width: 100%;
  height: auto;
}

4. 
img {
  position: fixed;
  bottom: 0;
  right: 0;
}
Woher ich das weiß:eigene Erfahrung
regex9  31.12.2022, 20:46

Die Codes der ersten beiden Lösungsvorschläge sind invalid. Einheitsangaben sind in den Attributwerten nicht zulässig. Das alt-Attribut sollte zudem nie vergessen werden.

0
regex9  01.01.2023, 07:56
@regex9

Nachtrag:

  • Ein Festsetzen der Bildbreite verhindert nicht, dass die Bildhöhe den Bildschirm überragt.
  • Wenn beide Dimensionen fest gesetzt werden, verzerrt es nichtquadratische Bilder.
  • Der letzte Vorschlag würde das Bild nur hin- und herschieben. Eine angepasste Skalierung findet nicht statt. Bildinhalte würden je Auflösung komplett verdeckt werden.
0