如何使横跨网站宽度的 3 张图像具有响应性？

Question

所以我想在网站的整个宽度上放置 3 张图片，每张图片占 1/3。我希望它们能够响应并在不同的屏幕尺寸上相应地缩放，并让它们保持纵横比，我会怎么做？

到目前为止我已经做到了这一点，但是当网站缩小时它们会非常不自然地收缩。

到目前为止，这是它的代码：

#content {
  height: auto;
  width: 100%;
  font-size: 0px;
  display: flex;
}

.images {
  width: 33.33%;
  height: 800px;
}

<div id="content">
  <img src="images/phantom.png" class="images" alt="Image of an actor from the musical Phantom of the Opera">
  <img src="images/lion_king.png" class="images" alt="Image of an actor from the musical Lion King">
  <img src="images/wicked.png" class="images" alt="Image of an actor from the musical Wicked">
</div>

Answer 1

将它们放在容器元素中并将图像设置为 width: 100% 或 max-width: 100%。

#content {
    height: auto;
    width: 100%;
    font-size: 0px;
    display: flex;
}

.images {
    width: 100%;
}

<div id="content">
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="images" alt="Image of an actor from the musical Phantom of the Opera">
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="images" alt="Image of an actor from the musical Lion King">
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="images" alt="Image of an actor from the musical Wicked">
  </div>
</div>

Answer 2

你快到了，将图像包裹在 div 中，然后将这些 div 设置为 flex-basis 三分之一，你可以使用 calc() 并设置 (max-)width:100% 来做到这一点至 imgs

编辑 - OP 的评论

This works, however the heights of the image are messed up and all different heights, not flush with the footer. How would I fix the heights too

因为你有不同比例大小的图像，你必须添加 display:flex 到 div

body {
  margin: 0
}

#content {
  height: auto;
  width: 100%;
  display: flex;
}

#content>div {
  flex: 0 calc(100%/3);
  display: flex;
  /*demo*/
  box-sizing: border-box;
  border: 2px solid red
}

img {
  width: 100%;
  display: block
}

<div id="content">
  <div>
    <img src="//placehold.it/300x800" class="images" alt="Image of an actor from the musical Phantom of the Opera"> </div>
  <div>
    <img src="//placehold.it/300x800" class="images" alt="Image of an actor from the musical Lion King">
  </div>
  <div>
    <img src="//placehold.it/300x800" class="images" alt="Image of an actor from the musical Wicked"></div>
</div>

如何使横跨网站宽度的 3 张图像具有响应性？

How do I make 3 images which span across the width of the site responsive?

html

css

responsive-images