// 图片默认全屏，即宽或高100%
    // 获取div可视宽高(clientHeight,clientWidth)
    var largeImageBox = document.getElementById('largeImageBox')
    // 默认图片宽/高是全屏
    var inner = document.getElementById('largeImage')
    if (inner) {
      // 防止图片未加载完，宽高取值为0
      inner.onload = function () {
        // 电脑屏幕高=宽
        if (largeImageBox.clientHeight == largeImageBox.clientWidth) {
          // 高>=宽，图片高默认为div高度
          if (inner.height >= inner.width) {
            inner.style.height = largeImageBox.clientHeight + 'px'
          } else {
            // 高<宽，图片宽默认div宽度
            inner.style.width = largeImageBox.clientWidth + 'px'
          }
          // 电脑屏幕高<宽
        } else if (largeImageBox.clientHeight < largeImageBox.clientWidth) {
          // 高>=宽，图片高默认为div高度
          if (inner.height >= inner.width) {
            inner.style.height = largeImageBox.clientHeight + 'px'
          } else {
            // 确保图片高度不超过100%，超过则取高
            const newHeight =
              (largeImageBox.clientWidth * inner.height) / inner.width
            if (newHeight > largeImageBox.clientHeight) {
              inner.style.height = largeImageBox.clientHeight + 'px'
            } else {
              // 图片宽默认div宽度
              inner.style.width = largeImageBox.clientWidth + 'px'
            }
          }
        } else {
          // 电脑屏幕高>宽
          // 高>=宽，图片宽默认为div宽度
          if (inner.height >= inner.width) {
            inner.style.width = largeImageBox.clientWidth + 'px'
          } else {
            // 确保图片宽度不超过100%，超过则取宽
            const newWidth =
              (largeImageBox.clientHeight * inner.width) / inner.height
            if (newWidth > largeImageBox.clientWidth) {
              inner.style.width = largeImageBox.clientWidth + 'px'
            } else {
              // 图片高默认div高度
              inner.style.height = largeImageBox.clientHeight + 'px'
            }
          }
        }
      }
    }

参考：https://blog.csdn.net/azezeze/article/details/127300128