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; 
  }
}

在600px宽度以下的屏幕上将图像及其容器的宽度设置为100％。 height: auto;是可选的 - 不知道你是否想要那个。

Answer 2

正如@Johannes所说，您可以添加具有特定行为的媒体查询以获得所需结果。

他的查询工作正常，我刚刚更正了最后一张图片的HTML结构：

  <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

并排图像会在移动设备上移动到垂直图像

2 个答案: