带有响应图像的弹性框中的高度定义 - Chrome/Safari答案

【问题标题】：height definition in flex box with responsive images - Chrome/Safari带有响应图像的弹性框中的高度定义 - Chrome/Safari
【发布时间】：2018-02-06 07:14:17
【问题描述】：

以下简单的pen 会导致 Chrome 和 Safari 中的不同行为。

这里是 HTML 代码：

<div class="row">
    <div class="col-md-6 d-flex">
        <img class="main-img" src="http://placehold.it/2000x1000.png">
    </div>
    <div class="col-md-6 d-flex">
        <p>Lorem<br><br><br><br><br>Ipsum</br></p>
    </div>
</div>

这里是 CSS

.d-flex{
  background-color: #999999;
}

div > img {
  margin-top: auto;
  margin-bottom: auto;
  width: 100%;
}

div > p {
  margin-top: auto;
  margin-bottom: auto;
  background-color: red;
}

特别是在 Safari 中，img 的上方和下方都没有多余的空间，而在 Chrome 中，空间很大

Chrome 似乎首先检查 img 高度以保留空间，然后将 img 缩小为 width:100% 而 Safari 先设置 width:100% 然后设置封闭 div 的高度。

如何让 Chrome 表现得像 Safari？

【问题讨论】：

请查看并评论我的回答，如果有不清楚或遗漏的地方，请告诉我。如果没有，那如果你能接受就好了。

标签： css google-chrome safari flexbox

【解决方案1】：

由于浏览器之间的不一致，img 作为 flex 项目的渲染可能会有所不同。

在这种情况下，请在 img 周围添加一个包装器。

Updated codepen

堆栈sn-p

.d-flex{
  background-color: #999999;
}

div > img {
  margin-top: auto;
  margin-bottom: auto;
  width: 100%;
}

div > p {
  margin-top: auto;
  margin-bottom: auto;
  background-color: red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-md-6 d-flex">
    <div>
      <img class="main-img" src="http://placehold.it/2000x1000.png">
    </div>
  </div>
  <div class="col-md-6 d-flex">
    <p>Lorem<br><br><br><br><br>Ipsum<br></p>
  </div>
</div>

另一种选择是从第一个 col-md-6 中删除 d-flex

Updated codepen 2

【讨论】：