Question

自从我开始真正学习CSS以来，这一直困扰着我。我知道如何设置背景图像并使用background-size：cover使其缩放。但是，我不知道如何正确地将图像适合于标题...让我们说10vh或50％。

html, body {
  width: 100%;
  height: 100%;
}
#main-head {
  background: url('./header-image.jpeg');
  background-size: cover;
  height: 70%;
}

我会看到... Example:1

我尝试做background-size：包含，虽然看起来或多或少是我的目标...我觉得长宽比...关闭...

html, body {
  width: 100%;
  height: 100%;
}
#main-head {
  background: url('./header-image.jpeg');
  background-size: 100% 100%;
  height: 70%;
}

我将身体设置为高度：100 ...这就是结果... Example:2

最终，我想做的是使背景图像完全适合给定的容器（在这里是主头），但我不知道这怎么可能。

Answer 1

您可以使用background-position: center;保持图像居中。以及是否要使<img/>自动缩放。您可以使用object-fit来实现。（ps：IE不支持object-fit）

Answer 2

更新background-size: cover将保持宽高比。

此外，您可能希望通过设置background-position: center;使背景居中；

#main-head {
        background: url('./header-image.jpeg');
        background-size: cover; // <-- maintain the aspect ratio, make it cover the element
        background-position: center; // <-- this will make the background center
        height: 70%;
}

如何在标题背景图片上保持长宽比？

2 个答案: