html - 如何制作响应式图像行

Question

我正在尝试弄清楚如何使一行图像响应窗口宽度。到目前为止，我有:

<div class="image-slider">
  <div><img src="/img1.jpg"></div>
  <div><img src="/img2.jpg"></div>
  <div><img src="/img3.jpg"></div>
  <div><img src="/img4.jpg"></div>
  <div><img src="/img5.jpg"></div>
</div>

和...

.image-slider {
  display: flex;
  overflow-y: scroll;
}

.image-slider div {
  flex: 1;
  margin: 5px
}

.image-slider div img {
  width: 100%;
  height: auto;
  min-width: 125px;
}

这很好用，但我现在想要的是当窗口小于 880 像素时让第五张图片消失，并调整其余四张图片的大小以占用剩余空间。

我尝试将 wide-only 类添加到第五个 div 标签:

<div class="wide-only"><img src="/img5.jpg"></div>

然后添加了一些媒体规则，如下所示，但效果不佳:

.image-slider div img.wide-only {
  display:none;
}

@media(min-width:880px) {
  .image-slider div img.wide-only {
    flex: 1 /* not sure what this should be - tried display: flex too */
  }
}

Answer 1

你添加了 display:none 所以在媒体查询中你应该添加 display:block (我还纠正了一些 CSS 选择器，因为你没有定位正确的标签):

.image-slider .wide-only {
  display:none;
}

@media(min-width:880px) {
  .image-slider .wide-only {
    display:block;
    flex: 1 /* not sure what this should be - tried display: flex too */
  }
}

完整代码:

.image-slider {
  display: flex;
  overflow-y: scroll;
}

.image-slider div {
  flex: 1;
  margin: 5px
}

.image-slider div img {
  width: 100%;
  height: auto;
  min-width: 125px;
}

.image-slider  .wide-only {
  display: none;
}

@media(min-width:880px) {
  .image-slider .wide-only {
    display: block;
    flex: 1/* not sure what this should be - tried display: flex too */
  }
}

<div class="image-slider">
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div class="wide-only"><img src="https://lorempixel.com/400/400/"></div>
</div>