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来做同样的事情，具体取决于支持约束。

注意：border框会停止填充声明，为列添加额外的宽度。 cf是一个clearfix，使容器相对于浮动元素的大小增长。休息很简单。

＆＃13;

* {
  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%;
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

如果您希望图像缩小，则需要使用媒体查询设置一些断点并尝试使用flexbox

.features{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;

}
.features img {
  padding: 10px;
  width: 310px;
  height: 381px;
}

@media all and (max-width: 600px) {
  .features img {
    width: 50%;
    height: 50%;
  }

Answer 3

试试这个：

.col {
  width: 25%;
  float: left;
  text-align: center;
  box-sizing: border-box;
}

@media screen and (max-width: 1285px) {
  .col {
    width: 50%;
    float: left;
  }
}

@media screen and (max-width: 670px) {
  .col {
    width: auto;
    float: none;
  }
  img {
    min-width: 220px;
  }
}
@media screen and (max-width: 365px) {
  img {
    
     width:100%;
  }
}

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

响应式图像容器

3 个答案: