Bildgröße in DIV Container richtig anpassen

Shor-ty · 29. September 2020

Hallo zusammen, ich hab mir jetzt selber mit sehr einfachen Mitteln eine Art "Light-Box" für meine Seite gebaut. Auf jedem <img> Element, dass ein Parent-Element <div class="article-image"> enthält ist ein Listener eingebaut, mit dem ich dann beim Klicken auf das Element eine Maske über mein derzeitiges Ansicht lege und dort das Bild anzeige. Das sieht dann ungefähr so aus: https://jsfiddle.net/rgqjovx5/5/

Jetzt die Frage. Das Bild, dass ich in den "<div class="info-2">" lege, überspannt den Div-Container. Ich möchte aber, dass das Bild nur die maximal Größe des Div Containers ausnutzen kann und falls das Bild zu klein ist, nicht gezogen wird. Ich denke mit dem Code-Beispiel wird alles klar.

Indigo66 · 29. September 2020

Wenn ich das richtig verstanden habe, fehlt Dir auf dem IMG-Tag ein width: 100% und ein height: auto;

CSS

.info-2 img {
    width: 100%;
    height: auto;
}

Shor-ty · 29. September 2020

Noch nicht ganz Indigo66. Wenn ich das direkt so verwende, dann habe ich Probleme wenn das Bild wesentlich höher als Breit ist. Dann müsste es genau andersherum sein. Heißt wohl, dass ich in JS kurz prüfe was größer ist und dann entsprechend auswähle oder gibt es hier eine Allgemeingültige Lösung?

Shor-ty · 29. September 2020

Ich habe es jetzt mit Deiner Info ergänzt und via einer Javascript-Kurzabfrage angepasst: https://jsfiddle.net/jb7okp3m/15/

Danke Dir.
Tobi