设置背景图像的宽度和高度，具有纵横比[重复]

Question

我在这个论坛和互联网上搜索解决方案，大多数解决方案都可用，但对我的情况没有任何作用......或者我可能不明白。

我有一张背景图片，我希望它采用 100% 的宽度和相同的高度值。

.top-section {
  background: url('../img-content/Bg1.png') no-repeat center center fixed;
  background-size: cover;
}

<div class="top-section"></div>

Answer 1

html, body {   height: 100%; }

.top-section {    
  width: 100%;   
  height: 100%;   
  background-image: url("'../img-content/Bg1.png");   
  background-attachment: fixed;   background-size: cover; 
}

其他图片使用类似

.top-section2 {
  width: 100%;   
  height: 100%;   
  background-image: url("");
  background-size: cover;
}