Bernd: CSS srcset für Backgrounds?

Hallo,

finde das Attribut srcset grundsätzlich ja supertoll in Kombi mit der Breitenangabe.

Was aber wenn man ein Produktfoto (Onlineshop) verwenden will, wo darauf Buttons/Infos sind?

Dann bleibt ja nix anderes übrig, als ein Hintergrundfoto mittels Background-Image zu verwenden... was vielleicht responsive ist, nicht aber je nach Auflösung verschiedene Varianten laden kann. Irgendwelche JS-Lösungen mal ausgenommen.

Oder geht es das Foto normal mit srcset in einen Div-Container zu packen und irgendwie obendrauf Texte/Buttons zu packen?

Danke, Bernd

  1. @@Bernd

    Dann bleibt ja nix anderes übrig, als ein Hintergrundfoto mittels Background-Image zu verwenden... was vielleicht responsive ist, nicht aber je nach Auflösung verschiedene Varianten laden kann.

    Doch, das geht.

    Oder geht es das Foto normal mit srcset in einen Div-Container zu packen und irgendwie obendrauf Texte/Buttons zu packen?

    Das geht auch.

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. Hallo Gunnar,

      die "@media-background"-Lösung klingt interessant, müsste aber vermutlich immer wegen der wechselnden Artikelfoto-URL "inline" mit in den HTML-Code oder?

      Die Positionierung ist mir bekannt, würde auf dem "gehintergrundeten" Produktfoto also "absolut" funktionieren.

      Und wenn ich img srcset nehmen? In ein DIV packen und ein 2. relative DIV mittels left oder so drüberpappen? Hab ich noch nie gemacht...

      Grüße, Bernd

      1. @@Bernd

        Hallo Gunnar,

        die "@media-background"-Lösung klingt interessant, müsste aber vermutlich immer wegen der wechselnden Artikelfoto-URL "inline" mit in den HTML-Code oder?

        ??

        Und wenn ich img srcset nehmen? In ein DIV packen und ein 2. relative DIV mittels left oder so drüberpappen? Hab ich noch nie gemacht...

        Container relativ positionieren, damit sich die Positionierung der Nachfahren auf den Container bezieht. Bild gar nicht positionieren; das, was darauf soll, absolut.

        Die von djr genannte Variante mit Grid ist aber noch charmanter.

        Ich hab mal beides gegenübergestellt.

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. @@Gunnar Bittersmann

          Die von djr genannte Variante mit Grid ist aber noch charmanter.

          Und jetzt mit noch mehr Charme:

          Statt

          .grid-example img
          {
          	grid-column: image;
          	grid-row: image;
          }
          

          kurz

          .grid-example img
          {
          	grid-area: image;
          }
          

          LLAP 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  2. Oder geht es das Foto normal mit srcset in einen Div-Container zu packen und irgendwie obendrauf Texte/Buttons zu packen?

    Mit CSS-Grid https://youtu.be/EashgVqboWo