html - 如何将 img 或 div 安装到 vh 单位小于 100% 的容器中

Question

当我将图像的高度设置为 100% 时，它占据视口(viewport)的 100% 而不是 80%。 我使用 overflow:hidden 作为它工作的容器，但图像被裁剪了，我无法使用 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 并且您的元素将拉伸(stretch)以覆盖所有高度，无论 top 的值是多少。