100％视口的背景图像

Question

我想使背景图像覆盖视口的整个可见部分。 但是我不希望浏览器缩小时图像会在侧面裁剪。 我希望图像看起来与浏览器更大时完全一样，

我将设置为 高度：100vh。

它确实覆盖了整个元素，但是却在侧面裁剪了图像。 如果我加了 宽度：100vh; 滚动条已添加。

如何使div元素覆盖所有100vh，并保持图像的长宽比不变，以便在所有浏览器中图像都一样？ CSS

    .box {
    background-image: url(images/joshua-earle-9idqIGrLuTE-unsplash.jpg);
   background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    box-sizing: border-box;
    height:100vh; 

HTML

<div class="box">
       
   </div>