没有换行的响应式图像

Question

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

我试图让我的图像相应地缩放，我希望它们能够水平地显示彼此相邻的位置。我使用白色空间使其工作：nowrap;但它显然没有得到很好的支持。有没有其他选择？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

You can view what I have here.

Answer 1

使用max-width和响应式网格布局。

＆＃13;

＆＃13;

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

.image {
  width: 33.33%;
}

img {
  width: 100%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我认为你正在寻找以下观点。

您可以使用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;
}

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;