图片展示时等比例缩放

通过object-fit进行图片等比例缩放

object-fit 属性有以下几种值:

contain:图片等比例缩放以完全填充容器,同时保持图像的宽高比。

cover:图片等比例缩放以完全填充容器,但可能会裁剪图片。

fill:图片拉伸以填充容器,忽略图像的宽高比。

直接上代码

javascript 复制代码
.list_middle_photo {
						width: 218rpx;
						height: 218rpx;
						margin-bottom: 24rpx;

						img {
							width: 218rpx;
							height: 218rpx;
							object-fit: cover; /* 图片将覆盖整个容器,但可能会被裁剪 */
							border-radius: 16rpx;
						}
					}

缩放前

缩放后

虽然图片裁剪了,但是比之前舒服多了

wx朋友圈也是类似操作

相关推荐
PD我是你的真爱粉21 分钟前
Vite 项目搭建与Pinia状态管理
前端框架·vue
薛一半22 分钟前
React的组件
前端·javascript·react.js
薛一半1 小时前
React三大属性之props
前端·javascript·react.js
用户5757303346242 小时前
🔥 前端必考!AJAX 数据请求全解析,async true/false 区别一次搞懂
javascript
麦麦大数据2 小时前
F071_vue+flask基于YOLOv8的实时目标检测与追踪系统
vue.js·yolo·目标检测·flask·vue·视频检测
烤麻辣烫2 小时前
正则表达式快速掌握
前端·javascript·学习·正则表达式·html
心之语歌3 小时前
flutter 父子组件互相调用方法,值更新
前端·javascript·flutter
肖。35487870943 小时前
html中onclick误区,后续变量会更改怎么办?
android·java·javascript·css·html
Lee川4 小时前
从字符串操作到数组映射:一次JavaScript数据处理的深度探索
javascript
随逸1774 小时前
《React 性能优化:useMemo 与 useCallback 实战》
javascript·react.js