将背景图像拟合到 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;

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

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

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/