图片展示时等比例缩放

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

相关推荐
风止何安啊10 小时前
递归 VS 动态规划:从 “无限套娃计算器” 到 “积木式解题神器”
前端·javascript·算法
GPTMirrors镜像系统10 小时前
JS 实现指定 UA 访问网站跳转弹窗提醒,解决夸克等浏览器兼容性问题
前端·javascript
脾气有点小暴10 小时前
JavaScript 数据存储方法全解析:从基础到进阶
开发语言·javascript·ecmascript
BD_Marathon11 小时前
【JavaWeb】JS_JSON和Map_List_array之间的转换
javascript
Rysxt_11 小时前
Vue文件下载功能完整指南:从基础实现到进阶实战
前端·javascript·vue.js
冰暮流星11 小时前
css3网格布局2
前端·css·css3
吃好喝好玩好睡好11 小时前
Flutter/Electron应用无缝适配OpenHarmony:全链路迁移方案与实战
javascript·flutter·electron
黛色正浓12 小时前
【React】极客园案例实践-文章列表模块
javascript·react.js·ecmascript
JokerLee...12 小时前
【Vtable自定义样式】
前端·javascript·vtable
BD_Marathon13 小时前
【JavaWeb】JS_JSON在服务端的使用
javascript