如何让flex容器中div的background-image保持比例适配容器？

你犯了个关键错误：object-fit和object-position是专门给<img>、<video>这类替换元素用的，对设置了background-image的<div>完全不起作用，所以你调遍object-fit的取值都没用。

要让背景图适配容器且不破坏宽高比，得用背景图专属的CSS属性，修改.main的样式如下：

.main {
  display: flex;
  width: 100%;
  height: 853px;
  justify-content: center;
  /* 背景图相关控制属性 */
  background-image: url('titelbild.jpg'); /* 建议把行内样式移到CSS里，方便统一维护 */
  background-size: cover; /* 保持宽高比，让图片覆盖整个容器，超出部分自动裁剪 */
  background-position: center center; /* 让图片在容器中居中显示 */
  background-repeat: no-repeat; /* 防止图片重复平铺 */
}

对应的HTML可以移除行内的background-image，改成上面CSS里的写法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Startseite</title>
  <link href="index.css" type="text/css" rel="stylesheet">
</head>

<body>
  <div class="main">
    <div class="titel">
      <h1>Engelberg Titlis</h1>
    </div>
  </div>
</body>
</html>

如果不想裁剪图片，而是让图片完整显示（容器可能会出现空白区域），可以把background-size: cover改成background-size: contain，这样图片会保持比例并完整适配容器的最大可用空间。

内容的提问来源于stack exchange，提问作者Lehe