在使用uniapp时,需要再选择图片后将图片高度超出盒子的部分隐藏,显示图片的中间部分
实现如下效果:
在使用object-fit: cover不起作用,可以使用image标签的属性mode来控制
我这设置的是
mode="aspectFill"
HTML:
<view class="upload-pic">
<view @click="choosePic()" class="inner">
<image v-show="!curImgUrl[0]" class="img" src="../../static/photograph/Frame@2x.png"
mode="">
</image>
<view v-show="!curImgUrl[0]" class="">
点击拍照上传人像图片
</view>
<image v-show="curImgUrl[0]" class="user-upload-pic" :src="curImgUrl[0]" mode="aspectFill">
</image>
</view>
</view>
CSS:
.upload-pic {
box-sizing: border-box;
width: 100%;
height: 360rpx;
background-color: #4E4E4E 42%;
position: relative;
opacity: 1;
border: 40rpx solid;
border-image: linear-gradient(216deg, rgba(189, 244, 217, 1), rgba(94, 152, 252, 1), rgba(186, 141, 240, 1)) 3 3;
border-radius: 40rpx;
clip-path: inset(0 round 46rpx);
margin-bottom: 32rpx;
.inner {
position: absolute;
z-index: 9;
top: -34rpx;
left: -34rpx;
background-color: #0C0C16;
height: 346rpx;
width: 678rpx;
border-radius: 40rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
.user-upload-pic {
width: 100%;
}
.img {
width: 180rpx;
height: 170rpx;
}
}
}
这样就可以达到效果啦!