如何在所有方向上设置图片的最大比例？（台式机/电话）

Question

我正在尝试为所有照片制作一个网络图像库。 当我单击图像时，我希望它以全屏弹出。 我使用一个容器来添加图片和退出按钮。

是否有没有Javascript的方法可以使各个方向的图片比例最大化，而又不会失去外观？例如，一幅肖像图片在台式机上的高度为100％，而在电话上宽度为100％。

如果我仅添加图片，它将可以正确缩放，但是在容器内部，这对我来说很棘手。

.container{
    margin-top: 1%;
    z-index: 20;
    margin-left: auto;
    margin-right: auto;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
    max-height: 95%;
}

.container img {
   max-width: 100%;
   max-height: 100%;*/

}

<div class="container">
  <img src="IMG_9810.jpg"  class="imagepopup">
  <button class="btn">X</button>
</div>