Bilder kombinieren?

[Mörf]

Tach,
gibt es eine "einfache" Möglichkeit mit Hilfe von CSS mehrere Bilder so anzuordnen, dass sie sich wie ein einzelnes großes Bild verhalten?

Konkret möchte ich dabei eigentlich zwei Dinge erreichen:

• Das resultierende "Gesamtbild" soll zentriert werden
• Wenn das "Gesamtbild" breiter ist als die verfügbare Anzeigefläche, soll das Bild verkleinert werden und dabei das Seitenverhältnis beibehalten.

Am liebsten wäre es mir dabei, wenn sich der HTML-Code auf das absolut notwendigste reduzieren ließe, also in etwa so:

<figure>  
<img src="(bild1)" alt="">  
<img src="(bild2)" alt="">  
<img src="(bild3)" alt="">  
</figure>  

Folgender, extrem häßlicher Code, verhält sich so, wie ich es möchte (zumindest im getesteten Firefox & IE):

  
<div class="eins"><div class="zwei"><div class="drei">  
<span><img src="(bild1)" alt=""></span>  
<span><img src="(bild2)" alt=""></span>  
<span><img src="(bild3)" alt=""></span>  
</div></div></div>  
</html>
~~~~~~css
.eins { display:block; text-align:center; }  
.zwei { display:inline-block; max-width:100%; }  
.drei { display:table; }  
.drei > * { display:table-cell; }  
.drei img { width:100%; height:100%; }

Die spans um die Bilder sind scheinbar notwendig, weil ich die Bilder nicht gleichzeitig als Tabellenzelle darstellen und diese Tabellenzellen vollständig ausfüllen lassen kann.
Die Darstellung als Tabelle von div.drei erlaubt keine Beschränkung mit max-width, und der inline-block-Container (für das shrink-to-fit) lässt sich nur zentrieren indem man dem übergeordneten Container ein text-align-center mitgibt.

Aber wie gesagt ist diese Lösung hässlich. Kennt jemand vielleicht eine elegantere Lösung?
(Ohne die Bilder gleich mit Hilfe einer Grafikbearbeitung gleich zu einem zu verarbeiten ;) )

Achja, bevor ich es vergesse: Das ganze soll funktionieren, ohne dass ich die genauen Dimensionen der Bilder im Voraus kenne. (Dann könnte ich ja ein einfaches, zentriertes display:block-div nehmen und mit width zurechtstutzen.)

[Matthias Apsel]

Om nah hoo pez nyeetz, Mörf!

Aber wie gesagt ist diese Lösung hässlich. Kennt jemand vielleicht eine elegantere Lösung?
(Ohne die Bilder gleich mit Hilfe einer Grafikbearbeitung gleich zu einem zu verarbeiten ;) )

Achja, bevor ich es vergesse: Das ganze soll funktionieren, ohne dass ich die genauen Dimensionen der Bilder im Voraus kenne.

Was hast du vor?

Matthias

[MrMurphy]

Hallo

Achja, bevor ich es vergesse: Das ganze soll funktionieren, ohne dass ich die genauen Dimensionen der Bilder im Voraus kenne. (Dann könnte ich ja ein einfaches, zentriertes display:block-div nehmen und mit width zurechtstutzen.)

Das wird mit css nicht funktionieren. Die Bilder müssen  schon zueinander passen. Wenn sie nebeneinander angeordnet werden sollen zum Beispiel die gleiche Höhe und Breite haben. Ansonsten stimmt die Darstellung spätestens bei unterschiedlichen Fenstergrößen nicht mehr.

Gruss

MrMurphy