使用 background-size:cover; 时如何保持背景图像的纵横比？

Question

我正在处理背景图像。

即使在使用background-size: cover;之后，有没有办法保持图像的纵横比？ ? 我的图像非常适合屏幕，但同时 - 它有点模糊。 我试过height: auto; 或任何其他height值，但它看起来像background-size: cover; 不允许操纵高度。

有没有办法控制高度？ 换句话说，垂直拉伸背景图像而不弄脏图像？

Answer 1

正如您在代码片段中看到的那样，背景尺寸：封面已经保持了纵横比。

 .bg-me{ background-image: url('https://assets.atlasobscura.com/media/W1siZiIsInVwbG9hZHMvcGxhY2VfaW1hZ2VzLzA0MzRjZGI4MTJlNjdkMzBmNV93aW5kb3dzX3hwX2JsaXNzLXdpZGUuanBnIl0sWyJwIiwidGh1bWIiLCJ4MzkwPiJdLFsicCIsImNvbnZlcnQiLCItcXVhbGl0eSA4MSAtYXV0by1vcmllbnQiXV0/windows_xp_bliss-wide.jpg'); background-size: cover; height: 200px; width: 200px; border: 10px solid red; }

 <div class="bg-me"> </div>