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

html部分

图片预览

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部分

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;

}

}

}