Question

我一直试图限制DIV的高度，使其永远不会高于浏览器窗口，但它只是不起作用。这是相关HTML / CSS的副本，您只需将其粘贴到文件中即可尝试：

＆＃13;

.imageContainer1 {
  display: block;
  width: 100%;
  height: 100%;
}
.imageContainer2 {
  display: inline-block;
  width: 100%;
  height: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  padding: 75% 0 0 0;
  background: url("https://dancing.moe/frames/jpg/1.jpg") no-repeat;
  background-size: 100% 100%;
}

＆＃13;

<div class="imageContainer1">
  <div class="imageContainer2">
  </div>
</div>

＆＃13;

填充是为了保持4：3的纵横比。由于我基本上将许多例子混合在一起，所以一切都有点不合时宜。

关于为什么这只能赢得工作的任何想法？即使以像素为单位指定也不会影响孩子。

Answer 1

只需使用vh中测量的高度即可。我也删除了你的填充等。

＆＃13;

.imageContainer1 {
  display: block;
  width: 100%;
  height: 100%;
}
.imageContainer2 {
  display: block;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  background: url("https://dancing.moe/frames/jpg/1.jpg") no-repeat;
}

＆＃13;

<div class="imageContainer1">
  <div class="imageContainer2">
  </div>
</div>

＆＃13;

Answer 2

这是你在找什么？

此解决方案中的关键是background-size: contain，它保持图像的宽高比，同时完整显示图像而不裁剪

＆＃13;

html, body {
  margin: 0;
}
.imageContainer1 {
  height: 100vh;
  background: url("https://dancing.moe/frames/jpg/1.jpg") no-repeat center center;
  background-size: contain;
}

＆＃13;

<div class="imageContainer1">
</div>

＆＃13;

如果你需要在里面使用其他元素，以类似的方式行事，请查看这篇文章，这是一个非常好的元素：scale-element-proportional-to-background-cover-and-contain

不能约束DIV的高度

2 个答案: