图片展示时等比例缩放

通过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朋友圈也是类似操作

相关推荐
像我这样帅的人丶你还7 小时前
别再让JS耽误你进步了。
css·vue.js
@yanyu6667 小时前
07-引入element布局及spring boot完善后端
javascript·vue.js·spring boot
@大迁世界7 小时前
2026年React大洗牌:React Hooks 将迎来重大升级
前端·javascript·react.js·前端框架·ecmascript
风止何安啊8 小时前
为什么要有 TypeScript?让 JS 告别 “薛定谔的 Bug”
前端·javascript·面试
Jacky-0088 小时前
Vue3+elementPlus+Vite项目
vue
海天鹰8 小时前
SOC架构
javascript
前进的李工9 小时前
MySQL角色管理:权限控制全攻略
前端·javascript·数据库·mysql
NPE~9 小时前
[App逆向]环境搭建下篇 — — 逆向源码+hook实战
android·javascript·python·教程·逆向·hook·逆向分析
洒满阳光的庄园9 小时前
Electron 桌面端打包流程说明
前端·javascript·electron
子琦啊10 小时前
【算法复习】数组与双指针篇
javascript·算法