当显示低于 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">&nbsp; <img src="img/img_2.jpg" alt="">&nbsp; <img src="img/img_1.jpg" alt="">&nbsp; <img src="img/img_0.jpg" alt=""></div><div id="img-mobile">&nbsp; <img src="img/img_2.jpg" alt="">&nbsp; <img src="img/img_1.jpg" alt="">&nbsp; <img src="img/img_0.jpg" alt=""></div>然后在 CSS 中：#img-flex{&nbsp; display: flex;}#img-mobile{&nbsp; display: none;}/* You use Media Queries for the responsive */@media screen and (max-width: 600px){&nbsp; &nbsp;#img-mobile{&nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp;}&nbsp;&nbsp; &nbsp;#img-flex{&nbsp; &nbsp; &nbsp; display: none;&nbsp; &nbsp;}}然后你添加 Javascript 来做你的滑块。

Answer 2

如果屏幕小于 600 像素，则三个图像将显示在另一个下方。大于 600 像素的所有图像都是并排放置的。我希望这是您正在寻找的....row {&nbsp; display: -ms-flexbox; /* IE10 */&nbsp; display: flex;&nbsp; -ms-flex-wrap: wrap; /* IE10 */&nbsp; flex-wrap: wrap;&nbsp; padding: 0 4px;}/* Create four equal columns that sits next to each other */.column {&nbsp; -ms-flex: 25%; /* IE10 */&nbsp; flex: 25%;&nbsp; max-width: 25%;&nbsp; padding: 0 4px;}.column img {&nbsp; margin-top: 8px;&nbsp; vertical-align: middle;&nbsp; width: 100%;}@media screen and (max-width: 600px) {&nbsp; .column {&nbsp; &nbsp; -ms-flex: 100%;&nbsp; &nbsp; flex: 100%;&nbsp; &nbsp; max-width: 50%; /* for fullscreen take 100% */&nbsp; }}<div class="row">&nbsp;&nbsp; <div class="column">&nbsp; &nbsp; <img src="https://www.zdnet.de/wp-content/uploads/2017/08/stackoverflow.jpg" alt="" style="width:100%;">&nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;<div class="column">&nbsp; &nbsp; <img src="https://www.zdnet.de/wp-content/uploads/2017/08/stackoverflow.jpg" alt="" style="width:100%">&nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;<div class="column">&nbsp; &nbsp; <img src="https://www.zdnet.de/wp-content/uploads/2017/08/stackoverflow.jpg" alt="" style="width:100%">&nbsp; &nbsp;</div></div>

Answer 3

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