不换行的响应图像

Question

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

我正在尝试使我的图像响应缩放，并且我希望它们水平并排显示。我已经使用 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.

Answer 1

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

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

Answer 2

我认为你正在看下面的视图。

可以使用flex获取

工作fiddle

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>

不换行的响应图像

Responsive images that don't line break

css

responsive-design

responsive-images

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