不换行的响应式图像答案

【问题标题】：Responsive images that don't line break不换行的响应式图像
【发布时间】：2017-06-11 00:23:44
【问题描述】：

简介：我还在学习，所以请温柔。

我正在尝试让我的图像响应式缩放，并且我希望它们水平并排显示。我已经使用 white-space: nowrap;但它显然没有得到很好的支持。有没有其他选择？

* {
  box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

ul {
  list-style-type: none;
}

section.gallery {
  width: 100%;
  padding: 0.3125em;
  white-space: nowrap;
}

section.gallery h2 {
  display: none;
}

section.gallery ul {
  width: 100%;
  padding: 0;
}

section.gallery li {
  display: inline-block;
  width: 33%;
  padding: 0.3125em;
}

section.gallery li:nth-of-type(1), section.gallery li:nth-of-type(5) {
   display: none;
}

<section class="gallery">
    <h2>Our Puppies</h2>
    <ul class="puppies">
      <li><img src="img/pup_1.png" width="500" height="500" alt="3 week old sable puppy"></li>
      <li><img src="img/pup_2.png" width="500" height="500" alt="5 week old blue puppy"></li>
      <li><img src="img/pup_3.png" width="500" height="500" alt="9 week old black-and-tan puppy"></li>
      <li><img src="img/pup_4.png" width="500" height="500" alt="5 week old black-and-tan puppy"></li>
      <li><img src="img/pup_4.png" width="500" height="500" alt="5 week old black-and-tan puppy"></li>
    </ul>
  </section>

You can view what I have here.

【问题讨论】：

您可以制作一个响应式布局，一个三列网格，每个网格占容器的 33%。然后使每个图像的最大宽度为 100%。它们将扩展到其容器大小，并且您的图像将变得响应。我会尽快写一个答案。
我的回答有帮助吗？如果没有，请提供反馈。

标签： css responsive-design responsive-images

【解决方案1】：

我认为您正在查看以下视图。

您可以使用flex获取它

工作小提琴

fiddle code

您可以在此处阅读有关 flex A complete guide of flex 的信息。

section.gallery ul {
  width: 100%;
  padding: 0;
  display:flex;
  flex-flow:row wrap;
  justify-content:flex-start;
  align-items:center;
}

section.gallery li {
  flex:1 0 0;
  padding: 0.3125em;
}

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

ul {
  list-style-type: none;
}

section.gallery {
  width: 100%;
  padding: 0.3125em;
  white-space: nowrap;
}

section.gallery h2 {
  display: none;
}

section.gallery ul {
  width: 100%;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
}

section.gallery li {
  flex: 1 0 0;
  padding: 0.3125em;
}

section.gallery li:nth-of-type(1),
section.gallery li:nth-of-type(5) {
  display: none;
}

<section class="gallery">
  <h2>Our Puppies</h2>
  <ul class="puppies">
    <li><img src="http://lorempixel.com/400/200" width="500" height="500" alt="3 week old sable puppy"></li>
    <li><img src="http://lorempixel.com/400/200" width="500" height="500" alt="5 week old blue puppy"></li>
    <li><img src="http://lorempixel.com/400/200" width="500" height="500" alt="9 week old black-and-tan puppy"></li>
    <li><img src="http://lorempixel.com/400/200" width="500" height="500" alt="5 week old black-and-tan puppy"></li>
    <li><img src="http://lorempixel.com/400/200" width="500" height="500" alt="5 week old black-and-tan puppy"></li>
  </ul>
</section>

【讨论】：

【解决方案2】：

使用最大宽度和响应式网格布局。

.container {
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.image {
  width: 33.33%;
}

img {
  width: 100%;
}

<div class="container">
  <div class="image"><img src="http://via.placeholder.com/350x150" alt=""></div>
  <div class="image"><img src="http://via.placeholder.com/350x150" alt=""></div>
  <div class="image"><img src="http://via.placeholder.com/350x150" alt=""></div>
  <div class="image"><img src="http://via.placeholder.com/350x150" alt=""></div>
  <div class="image"><img src="http://via.placeholder.com/350x150" alt=""></div>
  <div class="image"><img src="http://via.placeholder.com/350x150" alt=""></div>
</div>

【讨论】：