Auto Skalieren eines Images

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Florian FL

Neues Mitglied
25 Juli 2021
2
0
1
15
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. Screenshot 2021-07-25 123118.jpg
 
Zuletzt bearbeitet:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.456
466
83
68
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.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.456
466
83
68
Ich meinte, dass die Helfer hier, ohne das vorhandene HTML und CSS zu sehen, dir keine Lösung anbieten können. Daher ist es nötig, dass Du es entweder als Text hier postest oder die URL der Seite.
Edit: Jetzt erst den Screenshot angesehen. Offenbar hast Du das Bild als Hintergrund eingebunden und es wiederholt sich. Informiere dich über background-size und background-position, damit kannst Du das vermeiden:
Allerdings: Wenn es zu Wiederholungen kommt, bedeutet das, dass das Bild zu klein ist, um den Container auszufüllen. Eine Vergrößerung wird dann einen mehr oder weniger großen Verlust an Qualität bringen.
 
Zuletzt bearbeitet:

sandreas

Mitglied
29 April 2009
43
6
8
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.

HTML:
<picture>
    <source srcset="/img/articles/computer-2786081_235.avif 1x, /img/articles/[email protected] 2x, /img/articles/[email protected] 3x" type="image/avif">
    <source srcset="/img/articles/computer-2786081_235.webp 1x, /img/articles/[email protected] 2x, /img/articles/[email protected] 3x" type="image/webp">
    <source srcset="/img/articles/computer-2786081_235.jpg 1x, /img/articles/[email protected] 2x, /img/articles/[email protected] 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):
CSS:
img {
  width: 100%;
  height: auto;
}

Wenn es sich um ein background-image handelt, kannst du mit folgendem arbeiten:
CSS:
body {
     background-size: cover;
}

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