Machen Sie nebeneinander Bilder bewegen sich auf vertikale Bilder auf Handy

Question

Ich habe ein Div, das 4 nebeneinander Bilder, zusammen mit etwas Text über die Bilder. Anstatt die Bilder und den Text zu verkleinern, wenn es mobil ist, möchte ich die Bilder übereinander stapeln. Ich stehe jedoch fest, wenn ich es versuche.

Ich spielte mit den Stilen, und war nie in der Lage, dies zu erreichen.

Ich habe diese JS Fiddle (https://jsfiddle.net/deadendstreet/pwrd78gv/) mit einigen Testbildern erstellt, jedoch wird nur ein Bild angezeigt. Dies ist kein Problem auf meiner Website. Außerdem habe ich die folgenden Stile eingefügt.

Vielen Dank für Ihre Hilfe.

#highlights { 
width: 100%; 
max-height: 200px; 
background: rgba(0, 0, 0, 0.89); 
overflow: hidden; 
position: absolute; 
bottom: 200px; 
} 
#featured-boxes-light { 
width: 100%; 
max-height: 200px; 
background: rgba(255, 255, 255, 0.03) 
} 
#highlights .swiper-slide { 
position: relative; 
cursor: pointer; 
} 
#highlights .title-top, #featured-boxes .title-bottom { 
background: rgba(0, 0, 0, 0.48); 
width: 100%; 
position: absolute; 
padding: 10px 20px 10px; 
color: white; 
font-size: 22px; 
text-align: left; 
/* margin-top: -36px; */ 
left: 0%; 
/* margin-left: -35%; */ 
line-height: 22px; 
bottom: 0px; 
height: auto; 
z-index: 1; 
} 
.swiper-wrapper { 
max-height: 200px; 
} 
.fb-header { 
display: block; 
font-size: 16px; 
color: rgb(255, 0, 0); 
font-weight: 600; 
letter-spacing: 2px; 
text-shadow: 0px 0px 3px black; 
opacity: .9; 
width: 25%; 
} 
.fb-title .title-top:hover { 
opacity: .8 !important; 
} 
.fb-zoom { 
max-width: 350px; 
width: 100%; 
height: 200px; 
overflow: hidden; 
} 
.fb-zoom img { 
max-width: 350px; 
width: 100%; 
height: auto; 
} 
.fb-swipe-left, .fb-swipe-right { 
height: 195px; 
width: 40px; 
position: absolute; 
top: 0px; 
z-index: 999; 
background-size: contain !important; 
-webkit-transition: all 0.4s; 
-moz-transition: all 0.4s; 
-ms-transition: all 0.4s; 
-o-transition: all 0.4s; 
transition: all 0.4s; 
cursor: pointer; 
} 
.fb-swipe-left:hover, .fb-swipe-right:hover { 
background-color: rgba(255, 255, 255, 0.33); 
} 
.fb-swipe-left { 
background: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-left-128.png") center center no-repeat rgba(255,255,255,0.25); 
left: -40px; 
} 
.fb-swipe-left.fb-hovered { 
left: 0; 
} 
.fb-swipe-right { 
background: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png") center center no-repeat rgba(255,255,255,0.25); 
right: -40px; 
} 
.fb-swipe-right.fb-hovered { 
right: 0; 
} 
.swiper-scrollbar { 
height: 5px; 
position: absolute !important; 
width: 100%; 
bottom: 0px; 
margin: 0 auto; 
z-index: 999; 
background: rgba(255, 255, 255, 0.14) !important; 
} 
.swiper-scrollbar-drag { 
background: rgba(255, 255, 255, 0.7) !important; 

} 

Answer 1

https://jsfiddle.net/hon8trkz/

Fügen Sie diese Abfrage (Breite an Ihre Anforderungen angepasst werden):

@media screen and (max-width: 600px;) } 
    .fb-zoom, .fb-zoom img { 
    max-width: none; 
    height: auto; 
    } 
} 

sie die Breite der Bilder setzt und ihre Behälter zu 100% auf Bildschirmen unter 600px Breite. Die height: auto; ist optional - weiß nicht, ob Sie das wollen.

Answer 2

Wie @Johannes sagte, können Sie eine Medienabfrage mit einem bestimmten Verhalten hinzufügen, um das gewünschte Ergebnis zu erhalten.

Seine Abfrage funktioniert gut, ich Ihre HTML-Struktur für das letzte Bild nur korrigiert:

<div class="swiper-slide"> 
    <a class="fb-title" href=""> 
     <div class="title-top"> 
     test     </div> 
     <div class="fb-zoom"> 
     <img width="400" height="224" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSkbgZKjIRwUafNM8Nbo5BwoaJWk7byZbD82LOqVAwku6jC1DM_Ig" class="attachment-small" alt="100 Songs from SXSW mixtape" />      
     </div> 
    </a><!--/.swiper-wrapper --> 
    </div><!--/#swiper-featured --> 

Fiddle here