使用 flexbox 水平对齐图像，保持宽高比，并在居中时缩放到移动设备

Question

我正在尝试使用 CSS3 flexbox 水平对齐三个图像，同时相应地更改所显示图片的宽度。它需要动态调整大小并在移动设备上居中。我找到了几个 .

我想出了两个不完整的方法如下：

This 可以水平对齐它们，但问题是其中一张图像的高度不同，我不确定如何使其自动调整大小。我希望该图像保持其比例但占用相同的比例。除了使用媒体查询并让它 float:center 之外，我也不知道要采取什么方法使它在移动设备上将所有图像居中。实际上，我无法让它工作。
我的 other idea 是创建各种图像网格。我不知道如何让它们正确对齐，即使是在桌面上也是如此。我希望保留图像的个别比例，但让它们占据 window 宽度的 1/3，并根据需要根据 window 宽度调整图像大小。一旦它达到 480 像素宽度，将每个相同宽度的图像居中，但仍保留其各自的比例。

Answer 1

通过 object-fit 和 flex-aligning 元素到居中的元素，无论图像比例如何，您都可以让它们全部对齐，然后对于移动设备，只需将 flex-item 宽度更改为 50 %、100% 或任何你想要的 @media query

*{
  box-sizing: border-box ;
}

.flex-container {
  background: darkred;
  flex-direction:row;
  display: flex;

  align-items: center;
  width: 100%;
  flex-flow: row wrap;
}

.flex-item {
  padding: 20px;
  width: 33.33%;
  order: 1;  
}

.flex-item img{
  max-width: 100%;
  object-fit: contain;
}

<div class="flex-container">
  <div class="flex-item">
    <img src="https://alumni.csum.edu/image/content/emails/TellMeSomethingGood.png" alt="">
  </div>

  <div class="flex-item">
    <img src="https://kyuyoungshipperindo.files.wordpress.com/2014/06/something.jpg" alt="">
  </div>
  <div class="flex-item">
    <img src="https://alumni.csum.edu/image/content/emails/TellMeSomethingGood.png" alt="">
  </div>
  <div class="flex-item">
    <img src="https://kyuyoungshipperindo.files.wordpress.com/2014/06/something.jpg" alt="">
  </div>
  <div class="flex-item">
    <img src="https://kyuyoungshipperindo.files.wordpress.com/2014/06/something.jpg" alt="">
  </div>

  <div class="flex-item">
    <img src="http://www.sypte.co.uk/uploadedImages/Media/Press_Releases/see%20something.JPG" alt="">
  </div>
  <div class="flex-item">
    <img src="https://alumni.csum.edu/image/content/emails/TellMeSomethingGood.png" alt="">
  </div>
  <div class="flex-item">
    <img src="http://www.sypte.co.uk/uploadedImages/Media/Press_Releases/see%20something.JPG" alt="">
  </div>

</div>

使用 flexbox 水平对齐图像，保持宽高比，并在居中时缩放到移动设备

Use flexbox to horizontally align images, maintainin aspect ratio, and scale to a mobile device while centered

html

css

flexbox

css-grid