响应式图像容器答案

【问题标题】：Responsive Image Container响应式图像容器
【发布时间】：2017-05-03 14:47:52
【问题描述】：

我正在尝试获取一组 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 来做到这一点。

【问题讨论】：

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码.没有明确问题陈述的问题对其他读者没有用处。请参阅：如何创建minimal reproducible example。

标签： html css image responsive-design inline

【解决方案1】：

使用媒体查询设置断点的网格系统是您想要的。 https://codepen.io/anon/pen/EmXrMm

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

或者您可以根据支持约束使用 flexbox 执行相同的操作。

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

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

【讨论】：

谢谢！试过这个，它几乎是完美的，但是当在移动设备上查看时，图像仍然移动到 1 超过 8 行并且太大了。我可以避免这个我放入最大宽度或其他东西吗？
将第一个宽度声明更改为 50%，图像将以两行开始 - .features__col { width: 50%;向左飘浮;填充：15px；然后，您可以删除将它们设置为 50% 的第一个媒体查询，并调整第二个媒体查询的最小宽度，以在所需的视口宽度上制作 4 行。笔更新codepen.io/anon/pen/EmXrMm?editors=1100

【解决方案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%;
  }

【讨论】：

【解决方案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>

【讨论】：