css控制图片不改变原比例居中显示， 图片超出div部分隐藏

html部分

          <h2>图片预览</h2>
          <div class="md-camera" @click="previewImg">
              <img class="cameraImg" :src="preImgSrc" alt>
          </div>

css部分

 .md-camera {
        height: 340px;
        width: 100%;
        border-radius: 10px;
        border: 1px dashed rgba(208, 205, 207, 1);
        overflow: hidden;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;

        .cameraImg {
          width: 100%;
         }
}

点击查看大图
html部分

 <!-- 蒙版 -->
    <div class="mask" v-if="preStatus">
      <span @click="closePre">×</span>
      <div class="pre" v-if="showIV">
        <img class="preImg" :src="preImgSrc" alt>
      </div>
    </div>

css部分

 //   蒙版 -- 预览
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 1);
    .px2rem(10);
    padding: 0 @px2rem;

    span {
      display: block;
      .px2rem(80);
      color: #ffffff;
      font-size: @px2rem;
    }

    span {
      position: absolute;
      .px2rem(20);
      left: @px2rem;
      // top: @px2rem;
    }

    .pre {
      width: 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      .px2rem(360);
      margin-top: -@px2rem;
      margin: auto;

      .preImg {
        width: 100%;
        height: 100%;
        display: block;
      }

      img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        display: block;
      }
    }
  }