图片展示时等比例缩放

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

相关推荐
凯瑟琳.奥古斯特2 小时前
Redis是什么及核心特性
前端·css·redis·缓存
DFT计算杂谈2 小时前
VASP官方教程 TRIQS DFT+DMFT计算教程
运维·css·自动化·html·css3
兔子零10242 小时前
Ofox AI值得用吗?
前端·javascript·后端
We་ct2 小时前
React 性能优化精讲
前端·javascript·react.js·性能优化·前端框架·html·浏览器
渣渣盟3 小时前
Spark 性能调优实战:从开发到生产落地
javascript·ajax·spark
专科3年的修炼5 小时前
uni-app移动应用开发第四章
开发语言·javascript·uni-app
jay神5 小时前
基于团队模式的C程序设计课程辅助教学管理系统
java·spring boot·vue·web开发·管理系统
可达鸭小栈6 小时前
易语言实现CSS像素文字生成器:无需字体文件渲染汉字
前端·css
钛态6 小时前
前端TypeScript高级技巧:让你的代码更安全
前端·vue·react·web
yqcoder7 小时前
CSS 迷思破解:`:nth-child` vs `:nth-of-type`
前端·css