ebody: CSS - Bild Höhe neben flexiblen Text Container anpassen, wenn Display schmaler wird

Beitrag lesen

problematische Seite

Warum wills du das rein dekorative Bild nicht als Hintergrundbild haben?

Es würde mich so oder so interessieren, ob es so auch möglich ist. Ein Vorteil würde ich darin sehen, weil man dann verschiedene, bessere Bild Formate (.webp und .jpg, .png...) je Browser verwenden kann.

<picture>
  <source
    type="image/webp"
    srcset="bild-name.webp 1x, bild-name@2x.webp 2x"
  />
  <source
    type="image/jpg"
    srcset="bild-name.jpg 1x, bild-name@2x.jpg 2x"
  />
  <img src="bild-name.jpg" alt="" />
</picture>

Mit Media Queries könnte man zwar ab einer entsprechenden Displaybreite bild-name@2x.jpg als Hintergrundbild verwenden, aber eben nicht bild-name@2x.webp. Weil .webp nicht von jedem Browser (u.a. Safari) unterstützt wird. Meine ich zumindest.

Wobei, wenn ich das hier sehe kann man evtl. doch nur .webp verwenden?! Was meinst du (und andere)?

WebP image format - caniuse.com

Gruß ebody