使背景图像适合div

Question

我正在使用以下CSS使div在屏幕上始终保持完整大小，

.container{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  background: url("../assets/shutterstock_585038551.jpg");
  /*border: 1px solid black;*/
} 

但是，只有一部分背景图像显示出来，如何在不改变其纵横比的情况下调整背景图像。

Answer 1

将以下内容添加到CSS。

background-size: cover;
background-repeat:no-repeat;

这假设您的.container div是全角和全角。

如果不是，还添加以下内容：

width: 100vw;
height:100vh;

一些有关背景尺寸的信息。

https://www.w3schools.com/cssref/css3_pr_background-size.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

关于vh和vw的一些信息

https://css-tricks.com/fun-viewport-units/