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

Bilder in CSS bzw. HTML ausrichten

and4

Neues Mitglied
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
 
Werbung:
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 ;)
 
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>
 
Werbung:
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.
 
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.
 
Zurück
Oben