CSS

Allen 2021-12-03 09:50:04 5317 0 0 0 0

網站名稱：CSS控制图片不改变原比例居中显示，图片超出DIV部分隐藏

網站地址：

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

[SEO信息] [Alexa信息]

-->>直達網站

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;
      }
    }
  }