【uniapp】长方形图片显示中间正方形部分不压缩图片（圆形展示）

实现思路

在使用 uni-app 框架的 uni-image 组件时，如果要将长方形图片显示为中间的正方形部分，可以使用 CSS 来实现裁剪效果。首先使用mode="widthFix"，让图片宽度等于盒子的宽度高度自适应。再将图片父盒子设置宽高以及使用overflow: hidden来达到超出部分不显示的目的。使用flex布局使得图片水平垂直居中。注意如果不使用绝对定位的话，超出高度的图片也有可能挤压别的盒子，导致其他元素错位。

具体代码

<view class="image-container">
	<uni-image src="your-image-url" mode="widthFix" class="my-img"></uni-image>
</view>

.image-container {
	width: 200px; /* 调整容器宽度适应需要 */
	height: 200px; /* 调整容器高度适应需要 */
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	position: relative; /*使用绝对定位来防止高度挤压别的盒子*/
}
.my-img {
	position: absolute;
	width: 100%;
}

实现效果如下