html - 我如何在 4 :3 ratio 中渲染具有背景图像的 div

Question

我有一张图片，无论屏幕尺寸如何，我都想以相同的比例显示。我希望图像占据大约 80% 的屏幕宽度，然后应该自行计算高度，以便图像以 4:3 的比例呈现。我知道在 Stack-overflow 上也有类似的问题，但到目前为止，没有一个对我有帮助(尤其是那些 padding-top 的)。非常感谢任何帮助。

.tile-clients { 
  margin-top: 0px;
  text-align: center;
  padding: 0px 0px 0px 0px;
  min-height: 400px;
  max-height: 400px;
  width: 100%;

}

.clients {
  background: url("../images/clients.jpg"); 
  background-repeat: no-repeat;
  background-size: 100% 100%;
  min-width: 400px;
  min-height: 300px;
  width: 80%;
  margin: auto;
}


<section class = "tile-clients">
  <h2>Our Clients</h2>
  <div class = "clients"></div>
</section>

Answer 1

像 80vw 这样定义宽度并使用 calc 函数计算高度。我在下面为此创建了一个基本演示:

.tile-clients { 
  margin: 0px auto 0px;
  text-align: center;
  padding: 0px 0px 0px 0px;
  width: 80vw;
  height: calc(80vw * 0.75); 
/* 3/4 = 0.75   */
}

.clients {
  background: url("https://source.unsplash.com/neBHai7g9vc/800x600"); 
  background-repeat: no-repeat;
  background-size: 100% 100%; */
  width: 100%;
  height: 100%;
}

<section class = "tile-clients">
  <h2>Our Clients</h2>
  <div class="clients">
  </div>
</section>

Codepen