Wie man eine reagierende Reihe von Bildern macht

Question

Ich versuche herauszufinden, wie man eine Reihe von Bildern in Reaktion auf die Fensterbreite macht. Bisher habe ich:

<div class="image-slider"> 
    <div><img src="/img1.jpg"></div> 
    <div><img src="/img2.jpg"></div> 
    <div><img src="/img3.jpg"></div> 
    <div><img src="/img4.jpg"></div> 
    <div><img src="/img5.jpg"></div> 
</div> 

und ...

.image-slider { 
    display: flex; 
    overflow-y: scroll; 
} 

.image-slider div { 
    flex: 1; 
    margin: 5px 
} 

.image-slider div img { 
    width: 100%; 
    height: auto; 
    min-width: 125px; 
} 

Dies funktioniert gut, aber was ich will jetzt ist das fünfte Bild verschwinden, wenn das Fenster kleiner als 880px ist und haben die restlichen vier Bilder passen sich an, um den verbleibenden Speicherplatz zu belegen.

Ich habe versucht, das Hinzufügen eine wide-only Klasse den fünften div tag:

<div class="wide-only"><img src="/img5.jpg"></div> 

und dann noch ein paar Medien Regeln, wie unten gezeigt, aber es ist nicht ganz Arbeiten:

.image-slider div img.wide-only { 
    display:none; 
} 

@media(min-width:880px) { 
    .image-slider div img.wide-only { 
    flex: 1 /* not sure what this should be - tried display: flex too */ 
    } 
} 

Answer 1

Wenn Sie zusätzliche Klassen in Ihrem HTML-Markup zu vermeiden Hinzufügen Sie dies mit dem nth-child Pseudo-Selektor erreichen können und halten Sie Ihre Markup sauberer und wartbar .

.image-slider div:nth-child(n+5); wird die 5., 6., usw. untergeordneten divs des Bild-Slider übereinstimmen.

Als ein Beispiel unten gibt es zwei Ihrer 'Schieberegler' eine enthält 5 Elemente und eine enthält 9 Elemente. Unter 880px wird nur 4 angezeigt. Darüber wird alles angezeigt.

Ein Ansatz wie dieser ist besser skalierbar, weil Sie einfach weitere Medienabfragen mit einem höheren nth-child Wert hinzufügen können, zum Beispiel, wenn Sie 6 bei 1024 oder so anzeigen wollten, 8 bei 1280, usw. Und das haben Sie nicht Bearbeiten Sie Ihre HTML und Ihre CSS, um es zu tun.

Sie werden feststellen, dass ich auch die Medienabfrage umgekehrt habe, um maximale Breite zu verwenden, so dass wir mit kleinen Bildschirmen beginnen und die Erfahrung verbessern, wenn sie größer werden. Art eines mobilen ersten Ansatzes.

(Offensichtlich sehen das Snippet Vollbild)

.image-slider { 
 
    display: flex; 
 
    margin-bottom: 1rem; 
 
} 
 

 
.image-slider div { 
 
    flex: 1; 
 
    margin: 3px; 
 
} 
 

 
.image-slider div img { 
 
    width: auto; 
 
    max-width: 100%; 
 
} 
 

 
@media(max-width:879px) { 
 
    .image-slider div:nth-child(n+5) { 
 
    display: none; 
 
    } 
 
}

<div class="image-slider"> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
</div> 
 

 

 
<div class="image-slider"> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
</div>

Answer 2

Sie fügten display:none so in die Medienfrage hinzu, die Sie display:block hinzufügen sollten (ich korrigierte auch etwas CSS-Selektor, da Sie nicht das korrekte Tag abzielten):

.image-slider .wide-only { 
    display:none; 
} 

@media(min-width:880px) { 
    .image-slider .wide-only { 
    display:block; 
    flex: 1 /* not sure what this should be - tried display: flex too */ 
    } 
} 

eine vollständige Code:

.image-slider { 
 
    display: flex; 
 
    overflow-y: scroll; 
 
} 
 

 
.image-slider div { 
 
    flex: 1; 
 
    margin: 5px 
 
} 
 

 
.image-slider div img { 
 
    width: 100%; 
 
    height: auto; 
 
    min-width: 125px; 
 
} 
 

 
.image-slider .wide-only { 
 
    display: none; 
 
} 
 

 
@media(min-width:880px) { 
 
    .image-slider .wide-only { 
 
    display: block; 
 
    flex: 1/* not sure what this should be - tried display: flex too */ 
 
    } 
 
}

<div class="image-slider"> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div><img src="https://lorempixel.com/400/400/"></div> 
 
    <div class="wide-only"><img src="https://lorempixel.com/400/400/"></div> 
 
</div>