Question

我有一个使用背景图片的页面。 background-size设置为cover。

内容只是一个标题和两个按钮。我希望div始终是适合背景的比例高度。

最好的方法是什么（如果可能，使用纯CSS）？

Answer 1

您可以为背景和内联使用同一个图像文件，并将内嵌图像设置为visibility: hidden;（保留空间），因此div可以根据图像大小自动调整大小。

无法使用CSS检测背景图像大小。

.container {
  background: url("https://picsum.photos/600/150?image=0") 0 0 no-repeat;
  background-size: cover;
  position: relative;
  border: 1px solid red;
  overflow: hidden;
}

.image {
  visibility: hidden;
}

.title {
  position: absolute;
  width: 100%;
  background: rgba(255, 255, 255, .5)
}

<div class="container">
  <div class="title">Hello</div>
  <img class="image" src="https://picsum.photos/600/150?image=0">
</div>

Answer 2

知道这是旧线程，但偶然发现了它。

如果我知道图像的尺寸，以下内容对我有用

例如1220x404 => 1220/404 = 3.01980198 = 30.1980198

header { max-height: 404px; height: 30.1980198vw; }

将div缩放到背景图像高度

2 个答案: