javascript - 调整 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 溢出了。

您需要将 width:100% 添加到您的 img，因此它会调整大小以适应容器的任何宽度。

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

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