CSS 图片最大边自适应

Question

模拟移动端图片预览效果，使图片最大边适应屏幕宽或高。

<div class="prev-box">
  <img class="prev-img" src="https://images.unsplash.com/photo-1612998137328-15874448d686?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80" />
</div>

.prev-box {
  background: rgba(0, 0, 0, 1);
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
}

/* 保证最大边占满屏幕 */
.prev-box .prev-img {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

效果