Auto Skalieren eines Images

[Florian FL]

Ich habe ein Bild in den header eingefügt und bei meinem Freund sieht das Bild normal aus, aber aufgrund meiner Bildschirmauflösung sieht es ( siehe Anhang ) naja nicht so schön aus und ich wollte fragen wie ich das Bild Automatisch auf jede Auflösung Skaliere?

Ich hoffe ihr könnt mir helfen.

 

[threadi]

Der Anhang fehlt?

 

[Florian FL]

Und ohne das HTML und CSS wird es kaum möglich sein, eine Lösung anzubieten. Wenn die Seite öffentlich ist, dann poste am besten die URL.

Ich möchte es mit HTML und CSS automatisieren.

 

[sandreas]

Also um Bilder in Abhängigkeit des Geräts, mit dem sie betrachtet werden, zu "skalieren" bzw. eine Unterstützung für verschiedene Browser zu optimieren, kannst du das <picture> Element zusammen mit <source srcset=".."> verwenden und dann noch ein Fallback <img> angeben.

<picture>
    <source srcset="/img/articles/computer-2786081_235.avif 1x, /img/articles/computer-2786081_235@2x.avif 2x, /img/articles/computer-2786081_235@3x.avif 3x" type="image/avif">
    <source srcset="/img/articles/computer-2786081_235.webp 1x, /img/articles/computer-2786081_235@2x.webp 2x, /img/articles/computer-2786081_235@3x.webp 3x" type="image/webp">
    <source srcset="/img/articles/computer-2786081_235.jpg 1x, /img/articles/computer-2786081_235@2x.jpg 2x, /img/articles/computer-2786081_235@3x.jpg 3x" type="image/jpeg">
    <img src="/img/articles/computer-2786081_235.jpg" alt="Boot from hardware USB devices in Virtual Machines" title="Boot from hardware USB devices in Virtual Machines" loading="lazy" class="size-235 raster ext-jpg" width="235" height="144">
</picture>

Erklärung:

• srcset mit 1x, 2x und 3x angabe enthält das gleiche Bild in mehreren größen (1x: 235x100, 2x:470x200, 3x: 705x300)
• Mit mehreren source Elementen + type="..." kannst du das Bild in verschiedenen Formaten anbieten, der Browser sucht sich das "beste" aus, das er unterstützt (das kann etwas heikel sein, je nach Browser und Format kann die Ladezeit der Seite sich sogar verlängern)
• mit einem "fallback" img element sorgst du für eine breite Unterstützung möglichst vieler Browser, hier sollte dann ein Standardformat wie PNG oder JPG verwendet werden
• SVG(Z) kannst du immer dann verwenden, wenn du ein Vektor-Bild hast und keine alten Browser unterstützen musst. Hier brauchst du keine Verschiedenen Größen anzugeben

Es gibt zwar auch beim <img> ein srcset-Attribut, aber das ist weit weniger flexibel.

Für das automatische resizing / skalieren kannst du folgendes CSS verwenden (je nachdem, obs bei dir passt, kann das aber auch zu Problemen führen):

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

Wenn es sich um ein background-image handelt, kannst du mit folgendem arbeiten:

body {
     background-size: cover;
}

Mehrere Formate und Größen für ein Bild kann man NUR mit CSS meines Wissens nach leider nicht angeben.