css - 具有响应图像的 flexbox 中的高度定义 - Chrome/Safari

Question

下面简单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 首先设置宽度:100%，然后设置封闭 div 的高度。

如何让 Chrome 像 Safari 一样运行？

Answer 1

由于浏览器之间的不一致，作为 flex 元素的 img 可能呈现不同。

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

Updated codepen

堆栈片段

.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