javascript - 使并排图像在移动设备上移动为垂直图像

Question

我有一个 div，其中包含 4 个并排的图像，以及图像上的一些文本。我不想在移动设备上缩小图像和文本，而是将图像堆叠在一起。但是，当我尝试这样做时，我遇到了困难。

我玩过这些样式，但从未能够做到这一点。

我用一些测试图像创建了这个 JS Fiddle ( https://jsfiddle.net/deadendstreet/pwrd78gv/ )，但是，只显示了一个图像。这在我的网站上不是问题。此外，我粘贴了下面的样式。

感谢您的帮助。

#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/

添加此媒体查询(宽度可根据您的要求进行调整):

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

它在 600 像素宽度以下的屏幕上将图像及其容器的宽度设置为 100%。 height: auto; 是可选的 - 不知道您是否需要。