Ich bin gerade dabei für die Startseite ein Image auf Vollbild einzusetzten. Es hat eine Auflösung von 2560px x 1440px. Jedoch wenn ich es einfüge verringert sich die Auflösung. Auch wenn ich es über ein widget einfüge wird die Auflösung verringt. Dies führt dazu, dass bei grösseren Bildschrimen das Bild verpixelt wirkt.

Mein HTML Code:

<div id="landingpage">
    <img src="https://kvdnk.2038.io/live as strong as the mountains (5).jpg" />
</div>
 

Mein CSS Code:

#landingpage{
width: 100vw;
position:relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index:1;
      margin-top: calc(-12.5vh + 0%);
}
     #landingpage img{
 
width: 100vw;
}
 

Meine URL:
https://www.blocksolution.io/

Habt ihr irgendeine Idee? Bin gerade dran ein komplettes rework der Seite zumachen jedoch komme ich bei diesem einen Punkt nicht weiter.

Moin kvdnk

Wenn Du dein Widget vor dem hochladen des Bilds auf FullWidth gesetzt hast, kann es maximal die Auflösung des Bildschirms von dem Du das Bild hochlädst erreichen.

Hilft das?

Gruß,
Andre

Danke Andre, es hat funktioniert :-)

Super, freut mich. Immer gerne!