Safari没有将图像拉伸到flexbox网格

Question

我正在尝试使用flexbox为网站上的精选帖子构建一个简单的预告网格。它应该是这样的：

在FF和Chrome中，这一切都很好。如果我更改了一个图像的分辨率，则所有其他图像都会跟随并更新它们的大小。但不是在Safari中。无论我做什么，它永远不会适合同等的高度：

我真的不明白为什么会发生这种情况。右侧的每个图像容器都具有Flexbox计算的高度的50％。每个图像都应拉伸到那个高度。

我可以通过背景大小实现这个目标：封面但是我很想找到一个使用img标签的解决方案。

以下是演示：https://jsfiddle.net/7tjw8j83/1/

.featured-grid{
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit:cover;
}
.left{
  width: 66.6666%;
}
.right{
  width: 33.3333%;
  display: flex;
  flex-direction: column;
}
.right-top{
   background: green;
   flex: 1;
}
.right-bottom{
   background: red;
   flex: 1;
}

<div class="featured-grid">
  <div class="left">
    <img src="https://unsplash.it/600/450?image=1055">
  </div>
  <div class="right">
    <div class="right-top">
        <img src="https://unsplash.it/600/400?image=1051">
    </div>
    <div class="right-bottom">
        <img src="https://unsplash.it/600/400?image=1057">
    </div>
  </div>
</div>

Answer 1

除了迈克尔斯的建议，你可以这样做，我使用background-image代替img（因为你无论如何使用给定的高度），以及如何在绝对位置添加文字< / p>

html, body {
  margin: 0;
}
.featured-grid{
  display: flex;
  height: 100vh;
}
div {
  position: relative;
  background-position: center;
  background-repeat: no-reapat;
  background-size: cover;
  overflow: hidden;
}
.left {
  width: 66.666%;
}
.right{
  width: 33.333%;
  display: flex;
  flex-direction: column;
}
.right-top{
   flex: 1;
}
.right-bottom{
   flex: 1;
}
.text {
  position: absolute;
  left: 10px;
  bottom: 10px;
  color: white;     
}
.text > * {
  margin: 5px;     
}

<div class="featured-grid">
  <div class="left" style="background-image: url(https://unsplash.it/600/450?image=1055)">
    <div class="text">
      <h2>Title</h2>
      <h3>Text</h3>
    </div>
  </div>
  <div class="right">
    <div class="right-top" style="background-image: url(https://unsplash.it/600/400?image=1051)">
      <div class="text">
        <h2>Title</h2>
        <h3>Text</h3>
      </div>
    </div>
    <div class="right-bottom" style="background-image: url(https://unsplash.it/600/400?image=1057)">
      <div class="text">
        <h2>Title</h2>
        <h3>Text</h3>
      </div>
    </div>
  </div>
</div>

根据评论更新

html, body {
  margin: 0;
}
.featured-grid{
  display: flex;
  height: 100vh;
}
div {
  position: relative;
  overflow: hidden;
}
img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit:cover;
}
.left {
  width: 66.666%;
}
.right{
  width: 33.333%;
  display: flex;
  flex-direction: column;
}
.right-top{
   flex: 1;
}
.right-bottom{
   flex: 1;
}
.text {
  position: absolute;
  left: 10px;
  bottom: 10px;
  color: white;     
}
.text > * {
  margin: 5px;     
}

<div class="featured-grid">
  <div class="left">
    <img src="https://unsplash.it/600/450?image=1055">
    <div class="text">
      <h2>Title</h2>
      <h3>Text</h3>
    </div>
  </div>
  <div class="right">
    <div class="right-top">
      <img src="https://unsplash.it/600/400?image=1051">      
      <div class="text">
        <h2>Title</h2>
        <h3>Text</h3>
      </div>
    </div>
    <div class="right-bottom">
        <img src="https://unsplash.it/600/400?image=1057">      <div class="text">
        <h2>Title</h2>
        <h3>Text</h3>
      </div>
    </div>
  </div>
</div>

根据评论更新（2：nd）

html,
body {
  margin: 0;
}

.featured-grid {
  display: flex;
}

div {
  position: relative;
  overflow: hidden;
}

img {
  visibility: hidden;
  display: block;
}

img.show {
  position: absolute;
  visibility: visible;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.left img {
  max-height: 100vh;
}
.right img {
  max-height: 50vh;
}

.left {
  width: 66.666%;
}

.right {
  width: 33.333%;
  display: flex;
  flex-direction: column;
}

.right-top {
  flex: 1;
}

.right-bottom {
  flex: 1;
}

.text {
  position: absolute;
  left: 10px;
  bottom: 10px;
  color: white;
}

.text > * {
  margin: 5px;
}

<div class="featured-grid">
  <div class="left">
    <img src="https://unsplash.it/300/250?image=1055">
    <img class="show" src="https://unsplash.it/300/250?image=1055">
    <div class="text">
      <h2>Title 1</h2>
      <h3>Text 1</h3>
    </div>
  </div>
  <div class="right">
    <div class="right-top">
      <img src="https://unsplash.it/300/200?image=1057">
      <img class="show" src="https://unsplash.it/300/200?image=1057">
      <div class="text">
        <h2>Title 2</h2>
        <h3>Text 2</h3>
      </div>
    </div>
    <div class="right-bottom">
      <img src="https://unsplash.it/300/200?image=1057">
      <img class="show" src="https://unsplash.it/300/200?image=1057">
      <div class="text">
        <h2>Title 3</h2>
        <h3>Text 3</h3>
      </div>
    </div>
  </div>
</div>