html - 响应式图像容器

Question

我正在尝试获取一组 8 张图像(全部具有相同尺寸)，以等间距内联显示并响应浏览器宽度。

从 2 行 4 张图片开始，然后随着浏览器宽度的减小，将它们缩小到仍然清晰可辨的某个点，然后移动到 4 行 2 张图片。我注意到它在没有任何样式的情况下执行此操作，但它在将一个图像向下推到新行的位置之间也有一个阶段，因此 3-1-3-1。我想避免这种情况。

这是我目前正在使用的东西。

.features {
  width: 100%;
  display: block;
  text-align: center;
}

.features img {
  width: 220px;
  margin: 10px;
}

<div class="features">
  <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-lighweight-black.png?9028853389915552257">
  <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-pocket-black.png?9028853389915552257">
  <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-solar-black.png?9028853389915552257">
  <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-battery-black.png?9028853389915552257">
  <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-apple-black.png?9028853389915552257">
  <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-compatible-black.png?9028853389915552257">
  <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-connector-black.png?9028853389915552257">
  <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-led-black.png?9028853389915552257">
</div>

希望这是有道理的。假设这是可能的，我只想使用 CSS 和 HTML 来做到这一点。

Answer 1

网格系统使用媒体查询为您希望列更改宽度的位置设置断点是您想要的。 https://codepen.io/anon/pen/EmXrMm

CSS 技巧在此处有一篇关于滚动您自己的网格的好文章 https://css-tricks.com/dont-overthink-it-grids/ .

或者您可以根据支持约束使用 flexbox 来做同样的事情。

注意:边框框停止填充声明向列添加额外的宽度。 cf 是一个 clearfix，使容器的大小相对于内部的 float 元素增加。休息非常简单。

* {
  box-sizing: border-box;
}

.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

.cf {
  *zoom: 1;
}

.features__col {
  width: 100%;
  float: left;
  padding: 15px;
}

.features__col img {
  width: 100%;
}

@media (min-width: 400px) {
  .features__col {
    width: 50%;
  }
}

@media (min-width: 800px) {
  .features__col {
    width: 25%;
  }
}

<div class="features cf">
  <div class="features__col">
    <img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" alt="" />
  </div>
  <div class="features__col">
    <img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" alt="" />
  </div>
  <div class="features__col">
    <img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" alt="" />
  </div>
  <div class="features__col">
    <img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" alt="" />
  </div>
</div>
</div>