如何使用具有vh单位，小于100％的容器的img或div

Question

当我将图像的高度设置为100％时，它需要100％的视口而不是80％。我使用溢出：隐藏的容器，它工作但图像裁剪，我无法修复它与img和CSS的任何选项。我也用div替换了img标签并为它设置了背景图像，但是我遇到了同样的问题并再次用它裁剪了图像。

codepen

.container {
  max-width: 1200px;
  height: 80vh;
  margin: 0 auto;
  background-color: red;
  position: relative;
  overflow: hidden;
}

.image-container {
  position: absolute;
  right: 0;
  left: 0;
  top: 30%;
  width: 50%;
  height: 100%;
  background-color: blue;
  margin: 0 auto;
}

img {
  width: 100%;
  height: 100%;
  display: block;
  background-size: cover;
  background-position: center;
}

<div class="container">
  <div class="image-container">
    <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_582,c_limit/phonepicutres-TA.jpg" alt="">
  </div>
</div>

Answer 1

因为你设置height:100%所以不要使用top:30%。要么考虑将高度减小到70%以避免溢出或只是使用bottom:0并且你的元素将伸展以覆盖顶部值的所有高度。