带有图像的 Flexbox 网格 - 保持纵横比/比例答案

【问题标题】：Flexbox Grid with Images - Maintain Aspect Ratio / Proportions带有图像的 Flexbox 网格 - 保持纵横比/比例
【发布时间】：2017-07-11 08:50:10
【问题描述】：

我正在尝试使用 flexbox 进行如下布局：

 -- ------ --
|  |      |  |
|--|      |--|
|  |      |  |
 -- ------ --

每个角落的“盒子”都有一个长宽比为 1:1（正方形）的 img。中心“盒子”是 3:2。

问题是无论出于何种原因，角落框和中心框的高度都大于其中的响应式 img 的高度，我试图让它们完美对齐。

如何让弹性项目正确排列？

这是一个代码笔：https://codepen.io/codybarr/pen/zNgpVK

编辑：将 display: flex 添加到 .container .item 修复了 Firefox 中的问题，但没有解决 Chrome/Safari 中的问题。现在图像拉伸到它们的全分辨率高度......奇怪......

img {
  max-width: 100%;
}

@media (min-width: 700px) {
  .main {
    display: flex;
    flex-direction: row;
    background-color: orange;
  }
  .container {
    display: flex;
    flex-direction: column;
  }
  .container.second-column {
    flex: 1 0 60%;
  }
  .container .item {
    display: flex;
  }
  .container.second-column .item {}
  .container.first-column .item:nth-child(1) {
    background-color: blue;
  }
  .container.first-column .item:nth-child(2) {
    background-color: yellow;
  }
  .container.third-column .item:nth-child(1) {
    background-color: red;
  }
  .container.third-column .item:nth-child(2) {
    background-color: green;
  }
}

<head>
  <title>Flex Testing</title>
</head>

<body>
  <h1>Flex Test!</h1>
  <div class="main">
    <div class="container first-column">
      <div class="item">
        <img src="http://i-cdn.phonearena.com/images/article/90741-image/Google-touts-advanced-recipe-search-in-mobile-app.jpg" />
      </div>
      <div class="item">
        <img src="https://lh3.googleusercontent.com/-cigJW9TQSRU/AAAAAAAAAAI/AAAAAAAAABg/Pg3e9ogcsHU/s640/photo.jpg" />
      </div>
    </div>
    <div class="container second-column">
      <div class="item">
        <img src="https://www.inetsolutions.org/wp-content/uploads/2016/01/Capital-Letters-in-URLs-Do-Not-Influence-Google-Rankings.png" />
      </div>
    </div>
    <div class="container third-column">
      <div class="item">
        <img src="http://www.sociallyawareblog.com/files/2016/12/GettyImages-610773752_small.jpg" />
      </div>
      <div class="item">
        <img src="https://s-media-cache-ak0.pinimg.com/564x/b1/e2/db/b1e2dbe6c6b547a2ebc53a49fc3ffa8c.jpg" />
      </div>
    </div>
  </div>
</body>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

弹性容器的初始设置是align-items: stretch。这意味着弹性项目将默认扩展以覆盖容器横轴的整个长度。

考虑用align-items: flex-start 覆盖默认值。

 container .item {
   display: flex;
   align-items: flex-start; /* new */
 }

revised codepen

【讨论】：

这似乎对 Chrome/Safari 有用！非常感谢！