图片超出隐藏，object-fit: cover不起作用

在使用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;
			}
		}
}

这样就可以达到效果啦！