调整flexbox中的图像大小在Chrome中渲染不正确

Question

背景

我正在尝试创建一个div，其中一个图像位于另一端，另一端带有文本部分（占用剩余的可用空间）。图像的大小相对于窗口宽度而言，文本在可用空间内居中对齐。

此外，图像上有相对于其大小绝对定位的图标。

You can test it for yourself here

HTML：

<div id="previousVideo" onclick="backVideo();" title="Back">
  <div class="videoNameContainer">
    <p class="videoName"></p>
  </div>
  <div class="videoImageContainer">
    <div class="videoImageWrapper">
      <img class="videoImage" src="" />
      <span class="fa fa-backward"></span>
      <p class="videoTime"></p>
    </div>
  </div>
</div>

CSS：

#previousVideo,
#nextVideo {
  display: flex;
  padding: 5px;
  width: 25%;
  height: 40%;
  cursor: pointer;
}
.videoNameContainer {
  width: 100%;
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: center;
}
.videoImageContainer {
  height: 100%;
  display: flex;
  width: 40%;
  align-items: center;
}
.videoImageWrapper {
  width: 100%;
  max-height: 100%;
  display: flex;
  position: relative;
}
.videoName {
  margin: 0;
  max-height: 100%;
  overflow: hidden;
  background-color: white;
}
.videoTime {
  position: absolute;
  bottom: 0;
  right: 3px;
  color: white;
  margin: 0;
  font-size: 0.8em;
}
#previousVideo .videoNameContainer {
  margin-right: 5px;
}
#previousVideo .videoImageContainer {
  margin-left: auto;
}
.fa-backward, .fa-forward {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

问题

调整Firefox的窗口大小后，图像会调整大小，一切都在CSS之后。

然而，在Chrome上做同样的事情，图像根本没有调整大小：

为什么会这样？谢谢你！

更新

在向图片添加width:100%时，Chrome无法保持图片的宽高比：

Answer 1

你的容器正在调整大小，但是img正在溢出。

你需要为你的img添加宽度：100％，所以它会调整到容器的宽度。

.videoImage{
  width:100%;
  height:100%;
}

似乎没有图片本身的宽度声明，Firefox正在将img的大小调整为容器，而Chrome只是保持图像的实际宽度。