如何在css中缩放图像以使其完全适合浏览器窗口？

Question

我正在一个用户浏览图库的网站上工作，并可以选择点击图片的缩略图。单击后，图像将以完整大小打开。 我遇到的问题是，无论是横向还是纵向，某些图像都无法正确缩放。例如，完整尺寸的图像将缺少下半部分。如何在浏览器窗口中显示整个图像？或者至少使用户可以使用滚动条查看整个图像是否超出边界？

以下是我的CSS片段：

.img-cont{
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}

.box-expanded .img-cont{ 
box-shadow: 1px 1px 2px rgba(0,0,0,0.1); 
float: left; 
width: 100%;
height: 100% 
margin-right: 20px; 
box-shadow: 1px 1px 2px rgba(0,0,0,0.1); 

}