Question

我在flex容器中的图像有问题。我希望它在容器/窗口高度降低/调整大小时保持比率。

html,
body {
  height: 100%;
}

.wrapper {
  display: flex;
  width: 100%;
  height: 60%;
  border: 1px solid red;
}

.image-container {
  display: flex;
  align-items: center;
  max-width: 30%;
  height: 100%;
  background: green;
}

img {
  max-width: 100%;
  max-height: 100%;
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  width: 100%;
  height: 100%;
  background: yellow;
}

<div class="wrapper">
  <div class="image-container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Clouds_over_the_Atlantic_Ocean.jpg/1200px-Clouds_over_the_Atlantic_Ocean.jpg" alt="">
  </div>
  <div class="content">
    <span>Some content</span>
  </div>
</div>

当您尝试这样做时，您可以看到只有图像的高度发生变化，但宽度保持不变，图像有些拉伸。

当我从图像容器中删除'display：flex'时，图像会很好地调整大小。我把它设为flex，因为我希望它能够居中。

有没有办法保持比例并流畅地调整图像和其他容器的大小？

Answer 1

只需在 img 标记上添加object-fit: cover;：

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

<强> JSFiddle

保持图像在灵活容器中的比例调整高度

1 个答案: