如何制作响应式图像行

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>

Answer 2

如果您想避免在您的 html 标记中添加额外的类，您可以使用 nth-child 伪选择器来完成此操作，并使您的标记更清晰和更易于维护。

.image-slider div:nth-child(n+5); 将匹配图像滑块的第 5 个、第 6 个等子 div。

作为下面的示例，有两个“滑块”，一个包含 5 个元素，一个包含 9 个元素。低于 880px 只会显示 4，高于 4 会显示。

这样的方法更具可扩展性，因为您可以简单地添加具有更高 nth-child 值的附加媒体查询，例如，如果您想在 1024 处显示 6 等，在 1280 处显示 8 等。而您不需要必须编辑您的 HTML 和您的 CSS 才能做到这一点。

您会注意到我还将媒体查询反转为使用最大宽度，以便我们从小屏幕开始，并随着屏幕变大而改善体验。有点像移动优先的方法。

（显然，全屏查看sn-p）

.image-slider {
  display: flex;
  margin-bottom: 1rem;
}

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

.image-slider div img {
  width: auto;
  max-width: 100%;
}

@media(max-width:879px) {
  .image-slider div:nth-child(n+5) {
    display: none;
  }
}

<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><img src="https://lorempixel.com/400/400/"></div>
</div>


<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><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><img src="https://lorempixel.com/400/400/"></div>
</div>