当显示低于 600 像素时，如何将 html 图像更改为滑块？

Question

所以我正在设计一个网页，我有三个相互对齐的图像：html：<div id="imgs">  <img src="img/img_2.jpg" alt="">  <img src="img/img_1.jpg" alt="">  <img src="img/img_0.jpg" alt=""></div>CSS：#imgs img {    width: 29%;    margin: 1.5%; }在桌面上，我想将三个图像保持相邻，但在移动设备上，我想进入一个滑块。

Answer 1

一个简单的解决方案是制作两个元素并在页面宽度 > 600px 时显示第一个元素。否则你显示另一个。

<div id="imgs-flex">

  <img src="img/img_2.jpg" alt="">

  <img src="img/img_1.jpg" alt="">

  <img src="img/img_0.jpg" alt="">

</div>

<div id="img-mobile">

  <img src="img/img_2.jpg" alt="">

  <img src="img/img_1.jpg" alt="">

  <img src="img/img_0.jpg" alt="">

</div>

然后在 CSS 中：

#img-flex{

  display: flex;

}

#img-mobile{

  display: none;

}

/* You use Media Queries for the responsive */

@media screen and (max-width: 600px){

   #img-mobile{

      display: block;

   } 

   #img-flex{

      display: none;

   }

}

然后你添加 Javascript 来做你的滑块。

Answer 2

如果屏幕小于 600 像素，则三个图像将显示在另一个下方。大于 600 像素的所有图像都是并排放置的。

我希望这是您正在寻找的...

.row {

  display: -ms-flexbox; /* IE10 */

  display: flex;

  -ms-flex-wrap: wrap; /* IE10 */

  flex-wrap: wrap;

  padding: 0 4px;

}

/* Create four equal columns that sits next to each other */

.column {

  -ms-flex: 25%; /* IE10 */

  flex: 25%;

  max-width: 25%;

  padding: 0 4px;

}

.column img {

  margin-top: 8px;

  vertical-align: middle;

  width: 100%;

}

@media screen and (max-width: 600px) {

  .column {

    -ms-flex: 100%;

    flex: 100%;

    max-width: 50%; /* for fullscreen take 100% */

  }

}

<div class="row"> 

  <div class="column">

    <img src="https://www.zdnet.de/wp-content/uploads/2017/08/stackoverflow.jpg" alt="" style="width:100%;">

   </div>

     <div class="column">

    <img src="https://www.zdnet.de/wp-content/uploads/2017/08/stackoverflow.jpg" alt="" style="width:100%">

   </div>

     <div class="column">

    <img src="https://www.zdnet.de/wp-content/uploads/2017/08/stackoverflow.jpg" alt="" style="width:100%">

   </div>

</div>

Answer 3

您是否尝试过使用display: flex;最小最大值进行媒体查询？