Mosaik von Bildern HTML/CSS

Lesezeit: 13 Minuten

Mosaik von Bildern HTMLCSS
Entwickler-Schreibtisch

Ich möchte ein Bildlayout mit erstellen Porträtbilder in einem div mit einem festen Seitenverhältnis von 3:2. Die Größe der Bilder ist 327x491px.

Das Hauptproblem sind unerwünschte Leerzeichen zwischen Bildern. Wie mache ich Bilder als Mosaik ausrichten nur verwenden HTML/CSS?

HTML:

<div id="pictures1" class="_pictures1 grid">
    <div class="_pictures1-01"><div style="width:125px;height: 188px; background: red;"><img src="" width="125" height="188" alt="" /></div></div>
    <div class="_pictures1-02"><div style="width:192px;height: 288px;background: green;"><img src="" width="192" height="288" alt="" /></div></div>
     ... SO ON ...
</div>

CSS:

._pictures1 {
    width: 935px; height: 490px;
    margin: -26px 0 0 59px;
    float: left;
    top: 20%; left: 20%;
    position: absolute;
    border: 1px gray solid;
}
._pictures1 div {position: absolute;}
._pictures1-01 {top: 0px; left: 35px;}
._pictures1-02 {top: 200px; left: 0px;}
/* ... SO ON ... */

jsfiddle

  • Ich denke, der einfachste Weg, dies zu tun, ist die Verwendung eines CSS-Grid-Frameworks.

    – aloisdg

    6. März 14 um 10:37 Uhr

  • Versuchen Sie, Breite und Höhe für die divs festzulegen, die die Bilder enthalten, und fügen Sie sie hinzu position: relative auf diesen divs; Pro img hinzufügen max-width:100%; max-height:100%

    – Alexander G

    13. März 14 um 15:01 Uhr

  • Wie generieren Sie dieses Markup? Serverseitig? js oder nur manuell für eine bestimmte Seite?

    – Lu Roman

    13. März 14 um 15:06 Uhr

  • Mit deinem Layout ist das nicht möglich. Nur wenn Teile der Bilder geschnitten werden, kann dies erreicht werden. Dies liegt daran, dass die kleineren Bilder weniger breit sind, wenn Sie das Seitenverhältnis beibehalten.

    – Yunzen

    14. März 14 um 11:46 Uhr

  • @HerrSerker Guter Punkt! Ich verstehe immer noch nicht, was der OP erreichen will!? Und ich habe immer noch den Eindruck, dass ein Denkfehler vorliegt …

    – Netzsurfer

    14. März 14 um 15:03 Uhr

Mosaik von Bildern HTMLCSS
Web-Tiki

Um eine angemessene Antwort zu geben, werde ich zuerst die Anforderungen klären:

  1. Bilder haben alle das gleiche Seitenverhältnis: 3/2
  2. Bilder sollten nicht beschnitten werden
  3. kein Abstand zwischen den Bildern
  4. Machen Sie ein Mosaik aus Bildern

Sie können Tausende von Möglichkeiten haben, Ihre Bilder anzuzeigen. Ich werde ein einfaches Layout erstellen, das Ihnen zeigen soll, wie Sie Ihr eigenes erstellen können.

Hier ist ein AUSGEFALLENE GEIGE was Sie erreichen können und so sieht es aus:

Bildmosaik in html/css - Beispiellayout

Code:

body, html {
    width:100%;
    margin:0;
    padding:0;
}
#wrap {
    width:984px;
    height:492px;
}
.big_col, .medium_col, .small_col{
    height:492px;
    float:left;
}
img {
    display:block;
    margin:0;
    padding:0;
    border:none;
    float:left;
}
.big_col {
    width:328px;
}
.medium_col{
    width:164px;
}
.small_col{
    width:82px;
}
.big_img img {
    width:328px;
    height:492px
}
.medium_img img {
    width:164px;
    height:246px;
}
.small_img img {
    width:82px;
    height:123px;
}
<div id="wrap">
    <div class="big_col">
        <div class="small_img">
            <img src="https://picsum.photos/id/241/328/492" alt="" />
            <img src="https://picsum.photos/id/147/328/492" alt="" />
            <img src="https://picsum.photos/id/258/328/492" alt="" />
            <img src="https://picsum.photos/id/237/328/492" alt="" />
        </div>
        <div class="medium_img">
            <img src="https://picsum.photos/id/356/328/492" alt="" />
            <img src="https://picsum.photos/id/254/328/492" alt="" />
        </div>
        <div class="small_img">
            <img src="https://picsum.photos/id/156/328/492" alt="" />
            <img src="https://picsum.photos/id/175/328/492" alt="" />
            <img src="https://picsum.photos/id/132/328/492" alt="" />
            <img src="https://picsum.photos/id/197/328/492" alt="" />
        </div>
    </div>
    <div class="big_col">
        <img src="https://picsum.photos/328/492" alt="" />
    </div>
    <div class="small_col small_img">
        <img src="https://picsum.photos/id/210/328/492" alt="" />
        <img src="https://picsum.photos/id/152/328/492" alt="" />
        <img src="https://picsum.photos/id/142/328/492" alt="" />
        <img src="https://picsum.photos/id/189/328/492" alt="" />
    </div>
    <div class="medium_col medium_img">
            <img src="https://picsum.photos/id/254/328/492" alt="" />
            <img src="https://picsum.photos/id/111/328/492" alt="" />
    </div>
    <div class="small_col small_img">
            <img src="https://picsum.photos/id/198/328/492" alt="" />
            <img src="https://picsum.photos/id/201/328/492" alt="" />
            <img src="https://picsum.photos/id/286/328/492" alt="" />
            <img src="https://picsum.photos/id/145/328/492" alt="" />
    </div>
</div>

Erster Schritt: Nachdenken, rechnen und nochmals nachdenken

Zuerst : Nehmen wir zur Vereinfachung an, Ihre Bilder können 3 Größen haben (ich habe die Bildgröße um 1 px geändert, um die Berechnungen zu vereinfachen):

  1. groß : 328*492px
  2. mittel, 1/2 von groß : 164*246px
  3. klein, 1/4 von groß: 82*123px

Zweite : Da Ihre Bilder alle Hochformate sind und Ihr Container die gleiche Höhe wie das große Bild hat, müssen Sie mit 492 Pixel hohen Spalten arbeiten, die 3 Breiten haben können:

  1. groß : 328px breit, sie können Bilder in allen Größen anzeigen
  2. Mittel : 328/2 = 164px breit, sie können mittlere und kleine Bilder anzeigen
  3. klein : 327/4 = 82px breit, sie können nur kleine Bilder anzeigen

Dritte : Wie viele Spalten und welche Bildgrößen? Dies liegt an Ihnen, Sie müssen eine Auswahl entsprechend der Gesamtbreite Ihres Containers und der Anzahl der Bilder treffen, die Sie anzeigen möchten.

Aber in deiner Geige, dem Behälter (._pictures1) hat ein 935px Breite, die mit den zuvor gewählten Spaltenbreiten nicht zu erreichen ist.

935/82 = 11.4024...

Das nächste, was Sie bekommen können, ist 82*12 = 984px breiter Behälter.

Sie müssen entweder die Breite des Containers ändern oder die Größe der Bilder und Spalten an Ihre ursprüngliche Breite anpassen.

Oder (Spoiler) Sie können mit Prozentsätzen arbeiten, dies kann eine Alternative sein, besonders wenn Ihr Layout responsive sein soll, aber das kann kompliziert werden und ich versuche, die Dinge einfach zu machen.

Da Sie sicher neugierig sind und es ausprobieren möchten, finden Sie hier ein Beispiellayout in a

Responsives Mosaik der Bildgeige

Code-Auszug :

body, html {
    width:100%;
    margin:0;
    padding:0;
}
#wrap {
    width:100%;
}
.big_col, .medium_col, .small_col{
    float:left;
}
img {
    height:auto;
    display:block;
    margin:0;
    padding:0;
    border:none;
    float:left;
}
.big_col {
    width:25%;
}
.medium_col{
    width:12.5%;
}
.small_col{
    width:6.25%;
}

.small_col img{
    width:100%;
}
.medium_col>img {
    width:100%;
}
.medium_col .small_img img {
    width:50%;
}
.big_col .small_img img {
    width:25%;
}
.big_col .medium_img img {
    width:50%;
}
.big_col img {
    width:100%;
}
<div id="wrap">
    <div class="big_col">
        <div class="small_img">
            <img src="https://picsum.photos/id/241/328/492" alt="" />
            <img src="https://picsum.photos/id/147/328/492" alt="" />
            <img src="https://picsum.photos/id/258/328/492" alt="" />
            <img src="https://picsum.photos/id/237/328/492" alt="" />
        </div>
        <div class="medium_img">
            <img src="https://picsum.photos/id/356/328/492" alt="" />
            <img src="https://picsum.photos/id/254/328/492" alt="" />
        </div>
        <div class="small_img">
            <img src="https://picsum.photos/id/156/328/492" alt="" />
            <img src="https://picsum.photos/id/175/328/492" alt="" />
            <img src="https://picsum.photos/id/132/328/492" alt="" />
            <img src="https://picsum.photos/id/197/328/492" alt="" />
        </div>
    </div>
    <div class="big_col">
        <img src="https://picsum.photos/328/492" alt="" />
    </div>
    <div class="small_col small_img">
        <img src="https://picsum.photos/id/210/328/492" alt="" />
        <img src="https://picsum.photos/id/152/328/492" alt="" />
        <img src="https://picsum.photos/id/142/328/492" alt="" />
        <img src="https://picsum.photos/id/189/328/492" alt="" />
    </div>
    <div class="medium_col medium_img">
            <img src="https://picsum.photos/id/254/328/492" alt="" />
            <img src="https://picsum.photos/id/111/328/492" alt="" />
    </div>
    <div class="small_col small_img">
            <img src="https://picsum.photos/id/198/328/492" alt="" />
            <img src="https://picsum.photos/id/201/328/492" alt="" />
            <img src="https://picsum.photos/id/145/328/492" alt="" />
            <img src="https://picsum.photos/id/198/328/492" alt="" />
    </div>
</div>

Nächster Schritt: Entwerfen Sie das Layout

Verwenden Sie einen Stift, Photoshop oder ein anderes Werkzeug, das zu Ihnen passt. Wenn Sie wirklich gut sind, können Sie sogar Ihr Gehirn verwenden, um das gewünschte Layout mental darzustellen.

Ich habe das Bild entworfen, das Sie beim Bigining der Antwort sehen können.

Wie ich bereits sagte, gibt es viele Layoutmöglichkeiten (Anzahl der Spalten und Größen der Bilder in diesen Spalten), also habe ich für das Beispiel 2 große Spalten gewählt, 1 mittlere und 2 kleine

328*2+164+82*2 = 984px ( = width of container so it can fit!)

Letzter Schritt: Beginnen Sie mit dem Codieren!

Das Ergebnis seht ihr darin

GEIGE

Dieses Layout basiert auf schwimmt also müssen wir die Breite, Höhe von Containern, Spalten und Bildern definieren, damit sie alle gut nebeneinander passen (wie wir bereits mit Berechnung und Design darüber nachgedacht haben, ist es einfach).

body, html {
    width:100%;
    margin:0;
    padding:0;
}
#wrap {
    width:984px;
    height:492px;
}
.big_col, .medium_col, .small_col{
    height:492px;
    float:left;
}
img {
    display:block;
    margin:0;
    padding:0;
    border:none;
    float:left;
}
.big_col {
    width:328px;
}
.medium_col{
    width:164px;
}
.small_col{
    width:82px;
}
.big_img img {
    width:328px;
    height:492px
}
.medium_img img {
    width:164px;
    height:246px;
}
.small_img img {
    width:82px;
    height:123px;
}
<div id="wrap">
    <div class="big_col">
        <div class="small_img">
            <img src="https://picsum.photos/id/241/328/492" alt="" />
            <img src="https://picsum.photos/id/147/328/492" alt="" />
            <img src="https://picsum.photos/id/258/328/492" alt="" />
            <img src="https://picsum.photos/id/237/328/492" alt="" />
        </div>
        <div class="medium_img">
            <img src="https://picsum.photos/id/356/328/492" alt="" />
            <img src="https://picsum.photos/id/254/328/492" alt="" />
        </div>
        <div class="small_img">
            <img src="https://picsum.photos/id/156/328/492" alt="" />
            <img src="https://picsum.photos/id/175/328/492" alt="" />
            <img src="https://picsum.photos/id/132/328/492" alt="" />
            <img src="https://picsum.photos/id/197/328/492" alt="" />
        </div>
    </div>
    <div class="big_col">
        <img src="https://picsum.photos/328/492" alt="" />
    </div>
    <div class="small_col small_img">
        <img src="https://picsum.photos/id/210/328/492" alt="" />
        <img src="https://picsum.photos/id/152/328/492" alt="" />
        <img src="https://picsum.photos/id/142/328/492" alt="" />
        <img src="https://picsum.photos/id/189/328/492" alt="" />
    </div>
    <div class="medium_col medium_img">
            <img src="https://picsum.photos/id/254/328/492" alt="" />
            <img src="https://picsum.photos/id/111/328/492" alt="" />
    </div>
    <div class="small_col small_img">
            <img src="https://picsum.photos/id/198/328/492" alt="" />
            <img src="https://picsum.photos/id/201/328/492" alt="" />
            <img src="https://picsum.photos/id/145/328/492" alt="" />
            <img src="https://picsum.photos/id/198/328/492" alt="" />
    </div>
</div>

  • Glückwunsch! Dies ist die erste wirkliche Antwort auf das, was das OP vermutlich erreichen will! Vielleicht lohnt es sich, darüber nachzudenken, den ‘Schwimmer’ durch zu ersetzen display: table[-cell] oder display: inline-block, aber trotzdem ein +1 von meiner Seite!

    – Netzsurfer

    14. März 14 um 23:10 Uhr

  • @Netsurfer danke für deinen Kommentar :). Ich habe über diese alternativen Lösungen nachgedacht, aber ich denke, Schwimmer passen besser zur Situation des OP, weil display:inline-block; Wer würde Leerzeichen erstellen, um mit und umzugehen display:table-cell; ist nicht so crossbrower wie Schwimmer.

    – Web-Tiki

    15. März 14 um 1:19 Uhr

  • Leider ist die Website lorempixum.com nicht mehr aktiv und bricht diese Geigen. Jemand freiwillig zu reparieren?

    – Jeff Axelrod

    29. Juni 2020 um 21:06 Uhr

  • @JeffAxelrod Ich habe den Platzhalterbildanbieter geändert und Codeschnipsel hinzugefügt;)

    – Web-Tiki

    1. Juli 20 um 5:39 Uhr

Wenn Sie die eine oder andere Dimension festlegen, aber nicht beide, sollte die Größe der Bilder fließend geändert werden. Versuchen Sie, nur die Breite auf eine Prozenteinheit einzustellen.

Um Leerzeichen zwischen Bildern zu entfernen, entfernen Sie einfach den Wert „0“. padding und margin.

Um dann das zu erreichen, was Sie wollen, können Sie diese Strategien anwenden oder kombinieren:

1) Weisen Sie einer der Größen eine feste Größe in Pixel zu: die andere wird automatisch skaliert.

2) Sie können die benötigte Größe per Javascript berechnen und den Wert dynamisch zuweisen. Zum Beispiel mit dem jQuery-Framework:

$(img).each(function(){
 var h = this.height();
 var w = this.width();


 if (w => h){
  this.attr('width', w*0.66);
}
else {
  this.attr('height',h*.066);
}
});

3) Sie können CSS-Hintergrundbilder für Divs und verwenden background-size: cover oder background-size: contain nach Bedarf, statisch oder dynamisch (w3c-Dokumente

Die absolute Positionierung scheint nicht die beste Wahl zu sein, wenn Sie dieselben Positionen und dasselbe Verhältnis dynamisch beibehalten möchten.

Nativer HTML-Fluss ist normalerweise der richtige Weg.
Absolute Positionierung ist wie Vitamintabletten. Sie verwenden es, wenn Sie es brauchen, aber es ist nicht Ihre Hauptnahrung. 😉

Was ich tun würde ist:

  1. Positionieren Sie den Container einfach wie gewünscht (z. B. zentriert) und passen Sie seine Breite an den Prozentsatz des Fensters / Abschnitts an, in dem er sich befindet.

  2. Dann fügen Sie Ihre ._pictures1-xx divs darin ein und passen die Breite der Bilder mit dem Prozentsatz des Containers an. Die Höhe behält das Verhältnis automatisch bei

Ich würde dann die ._pictures1-xx divs dazu bringen, “inline-block” anzuzeigen und “links” zu schweben. Dann ein kleines div mit clear “both” nach dem letzten Bild und den Container schließen.

Erinnerung: Der Standardwert für Breite oder Höhe ist “auto”, was bedeutet, dass jede Größe das Bildverhältnis beibehält, wenn die andere ein px/%-Wert ist. Die horizontalen Ränder werden automatisch dynamisch, wenn die Höhe Ihrer Bilder definiert wird, um die Verhältnisse Ihrer Bilder beizubehalten. Wenn Sie die Breite definieren und die Höhe automatisch lassen, ist die Höhe dynamisch, um das Verhältnis der Bilder beizubehalten, und die Ränder ändern sich nicht.

Ich hoffe, das war hilfreich. img Ich möchte eine einfache Lösung geben.

Sie können einfach wickeln

Tag mit DIV. Und Sie sollten CSS auf dieses umschlossene DIV anwenden.

<img src="https://stackoverflow.com/questions/22221333/some_image.jpg">

Beispielcode

<div class="img_wrapper">
     <img src="https://stackoverflow.com/questions/22221333/some_image.jpg">
</div>

An Stelle von

//  suggestion: target IMG with parent class / ID
.img_wrapper img{
    width: 100%; 
    height: auto;
}

Verwenden Sie die folgende Art von Struktur .img_wrapper CSS

Mosaik von Bildern HTMLCSS
Alle Bilder innerhalb der Klasse

hätte das richtige Seitenverhältnis.

1643412731 64 Mosaik von Bildern HTMLCSS
Asgar C

umschließen Sie Ihr Bild mit einem div. Stellen Sie Breite und Höhe für das div entsprechend dem Verhältnis ein. Geben Sie nur die Höhe für das Bild an. Wenn Sie möchten, dass das Bild nur Platz beansprucht, müssen Sie auch display:inline verwenden

Chintan Bhatt

body{
    background: black;
    width:80%;
    margin:5em auto;
    display:block;
}
.wrapper{
    background:#FFF;
    float:left;
}   

.container{
    height:476px;
    width:192px;
    display:inline-block;
    float:left;
}
.small{
    height:188px;
    width:125px;
    display:block;
    margin:0 auto;
    background:#333;
}
.medium{
    background:#666;
    width:192px;
    height:288px;
}
.large{
    height:476px;
    width:200px;
    background:#999;
    display:inline-block;
    float:left;
}

Versuchen Sie so etwas

<div class="wrapper">
    <div class="container">
        <div class="small">
            <div class="small_inner">
            </div>
        </div>        
        <div class="medium">
            <div class="medium_inner">
            </div>
        </div>
    </div>
    <div class="large">
        <div class="large_inner">
        </div>
    </div>
    <div class="container">
        <div class="medium">
            <div class="medium_inner">
            </div>
        </div>
        <div class="small">
            <div class="small_inner">
            </div>
        </div>  
    </div>
    <div class="large">
        <div class="large_inner">
        </div>
    </div>
    <div class="container">
        <div class="small">
            <div class="small_inner">
            </div>
        </div>        
        <div class="medium">

            <div class="medium_inner">
            </div>
        </div>
    </div>
</div>

Styling

Gitterstruktur

Seitenverhältnis

680900cookie-checkMosaik von Bildern HTML/CSS

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy

Contact - Terms and Conditions - Privacy Policy