Bilder in CSS bzw. HTML ausrichten

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

and4

Neues Mitglied
13 September 2019
4
0
1
56
Liebes Forum,
ich möchte mehrere Bilde unterschiedlicher Größe nebeneinander positionieren und habe das mit der Flexbox auch hinbekommen.
Leider ist das eine ziemliche Fummelei, bis die Höhe der Bilder so angepasst ist, dass eine Bildschirmweite komplett ausgefüllt wird.
Gibt es denn eine Möglichkeit, CSS zu sagen: Richte die Höhe der Bilder automatisch so aus, dass der ganze Flexboxcontainer gefüllt wird und nur die angegebenen Paddings bzw. margins bleiben, die Flexbox jedoch nicht über die Bildschirmweite hinausgeht?
Vielen Dank für Eure Hilfe
And
 

scbawik

Senior HTML'ler
14 Juli 2011
2.552
448
83
Liebes Forum,
ich möchte mehrere Bilde unterschiedlicher Größe nebeneinander positionieren und habe das mit der Flexbox auch hinbekommen.
Leider ist das eine ziemliche Fummelei, bis die Höhe der Bilder so angepasst ist, dass eine Bildschirmweite komplett ausgefüllt wird.
Gibt es denn eine Möglichkeit, CSS zu sagen: Richte die Höhe der Bilder automatisch so aus, dass der ganze Flexboxcontainer gefüllt wird und nur die angegebenen Paddings bzw. margins bleiben, die Flexbox jedoch nicht über die Bildschirmweite hinausgeht?
Vielen Dank für Eure Hilfe
And

Etwas Beispielcode wäre vielleicht was ;)
 

and4

Neues Mitglied
13 September 2019
4
0
1
56
Ich vergaß.... .-)

CSS:
.flex-container {display:flex;justify-content:space-around;margin-left: 0.5em; margin-right: 0.5em;max-width: 100%;}

.flex-item {border: 1px solid #ebebeb;
margin: 0.1em;
padding: 0.1em;
font-size: 0.7em;font-family:"lucida sans";font-weight:300; text-align: center;
}
.img530 {height:530px;width: auto;}
.img11 {height:640px;width: auto;}

HTML:
<div class="flex-container">
<p class="flex-item">
<img class="img530" src="https://..." alt="Bild kann nicht geladen werden." />
</p>
<p class="flex-item">
<img class="img530" src="https://..." alt="Bild kann nicht geladen werden." />
</p>
<p class="flex-item">
<img class="img530" src="https://..." alt="Bild kann nicht geladen werden." />
</p>
</div>
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.147
428
83
68
Wenn die Bilder ein einheitliches Seitenverhältnis haben, braucht man nur die Flexitems gleich breit zu machen:
Code:
        .flex-container {
            display: flex;
            justify-content: space-around;
            margin-left: 0.5em;
            margin-right: 0.5em;
            max-width: 100%;
        }

        .flex-item {
            flex: 1;
            border: 1px solid #ebebeb;
            margin: 0.1em;
            padding: 0.1em;
            font-size: 0.7em;
            font-family: "lucida sans";
            font-weight: 300;
            text-align: center;
        }

        .img530 {
            height: auto;
            width: 100%;
        }
Aber ich fürchte fast, das ist nicht der Fall und Du möchtest, dass sie alle die selbe Höhe haben aber dass die Breite automatisch verteilt wird?
 

and4

Neues Mitglied
13 September 2019
4
0
1
56
Ja, genau wie Du es im letzten Satz beschreibst, ist es und möchte ich es haben. Ich könnte jetzt zwar anfangen, alle Bilder auf ein einheitliches Format zu bringen, aber ich hatte die Hoffnung, dass das nicht erforderlich ist.
Mit den einzelnen img-classes, in denen die Höhe angegeben wird, komme ich zwar in etwa hin, aber damit einheitliche Flexboxbreiten hinzubekommen, ist eher Glückssache.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.147
428
83
68
Man kann das relativ leicht mit Javascript automatisieren:
Code:
    <script>
        window.addEventListener('load', function () {
            var images = document.querySelectorAll('.flex-container img');
            for (var i = 0; i < images.length; i++) {
                var theimage = images[i];
                var aspectratio = theimage.naturalWidth / theimage.naturalHeight;
                theimage.parentNode.style.flex = aspectratio;
            }
        });
    </script>
 

and4

Neues Mitglied
13 September 2019
4
0
1
56
Dazu müsste ich erst mal JavaScript lernen ...
Hatte gehofft, dass es eine Lösung mit HTML und CSS geht.
Jetzt stellt sich wohl die Frage, was der geringste Aufwand ist.
 
Werbung: