markus538: Sich der Seite anpassende Vorschaubilder

SELF-Forum

Sich der Seite anpassende Vorschaubilder

markus538
– Informationen zu den Bewertungsregeln

Hallo Leute,
wenn ich ehrlich bin habe ich von Javasript noch nicht viel Ahnung, habe bis jetzt immer nur einfache HTML Seiten programmiert. Wollte mich jetzt aber mehr mit de Materie auseinandersetzen. Möchte für unsere Firma eine neue Webseite erstellen und wollte die Bildergalerie so wie auf folgender Seite machen (Link unten).
d.h. die Vorschaubilder sollen sie der Bildschirmauflösung entsprechend anpassen.

http://www.h2a.lu/fr/projets

Auch wenn die Frage jetzt ungenau ist, aber wie setze ich sowas um?

Danke
gruß
m.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Sich der Seite anpassende Vorschaubilder

    Matthias Apsel Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Om nah hoo pez nyeetz, markus538!

    Auch wenn die Frage jetzt ungenau ist, aber wie setze ich sowas um?

    Pack die Bilder in figure-Elemente, die du entsprechend positionierst, etwa über flexbox. Wenn dir die Browserunterstützung zu gering ist, verwende display: table-*

    Diesen figure-Elementen gibtst du prozentuale Abmessungen und den Bildern im Inneren ein passendes background-size.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen scheu und Scheune.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Sich der Seite anpassende Vorschaubilder

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@Matthias Apsel:

      nuqneH

      Diesen figure-Elementen gibtst du prozentuale Abmessungen und den Bildern im Inneren ein passendes background-size.

      ?? Die Bilder sind doch durchaus Inhalt (also <img>), nicht schmückendes Beiwerk (Hintergrundbilder).

      Mit img { width: 100% } gibt man ihren die Breite ihres Containers.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Sich der Seite anpassende Vorschaubilder

        Matthias Apsel Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Om nah hoo pez nyeetz, Gunnar Bittersmann!

        ?? Die Bilder sind doch durchaus Inhalt (also <img>), nicht schmückendes Beiwerk (Hintergrundbilder).

        Mit img { width: 100% } gibt man ihren die Breite ihres Containers.

        Was aber je nach Seitenverhältnis zu Rändern führt.

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Boss und Bossa nova.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Sich der Seite anpassende Vorschaubilder

          Gunther
          – Informationen zu den Bewertungsregeln

          Om nah hoo pez nyeetz, Matthias!

          ?? Die Bilder sind doch durchaus Inhalt (also <img>), nicht schmückendes Beiwerk (Hintergrundbilder).

          Mit img { width: 100% } gibt man ihren die Breite ihres Containers.

          Was aber je nach Seitenverhältnis zu Rändern führt.

          Wenn die Höhe auf 'auto' gesetzt ist, wohl kaum. ;-)

          Bei der angegebenen Beispielseite handelt es sich ja um eine Portfolio-/ Referenzseite mit entsprechenden Projekten.

          Bei dem "Mosaik" haben die einzelnen Grafiken/ Bilder alle ein entsprechendes Größenverhältnis - ohne eine solche Verhältnismäßigkeit dürfte man auch kaum eine Chance haben, das Mosaik ohne "Lücken" zu erstellen.

          Auf der verlinkten Beispielseite wird die Anordnung durch eine exzessive "absolute Positionierungsorgie" per Javascript (ohne ist die Seite bei schmaleren Viewports übrigens "unbenutzbar") erreicht.

          Flexbox scheint mir hier nicht das geeignete Mittel der Wahl zu sein.

          Spontan würde ich eher so vorgehen:
          Ich würde Container-Elemente mit der Größe des größten Einzelbildformats definieren und diese per 'display: table[-row|cell]' anordnen.
          In diesen Container-Elementen kann man dann entweder 1 einzelnes (großes) Bild, oder entsprechend mehrere kleine Bilder anordnen (für die keine weitere Formatierung erforderlich ist).

          Et voilà ...!

          Die Container-Elemente per relativer Größe formatiert und ggf. deren Anzahl pro Zeile per Media Queries gesteuert, und fertig ist das "skalierende Mosaik".

          Gruß Gunther

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln