html部分
<h2>圖片預(yù)覽</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%;
}
}
點(diǎn)擊查看大圖
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部分
// 蒙版 -- 預(yù)覽
.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;
}
}
}
