图片展示时等比例缩放

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

相关推荐
敲敲了个代码15 小时前
从零实现一个「就地编辑」组件:深入理解 OOP 封装与复用的艺术
前端·javascript·学习·面试·前端框架
南游15 小时前
数组判断?我早不用instanceof了,现在一行代码搞定!
前端·javascript
JIseven15 小时前
app页面-锚点滚动 和 滚动自动激活菜单
前端·javascript·html
tj15 小时前
CSS属性:background-position
css
AAA阿giao15 小时前
在你的网页中嵌入 Coze 智能客服:一步步打造专属 AI Agent
前端·javascript·人工智能
AAA阿giao15 小时前
深入解析 OOP 考题之 EditInPlace 类:从零开始掌握面向对象编程实战
前端·javascript·dom
西西学代码15 小时前
flutter---进度条(2)
前端·javascript·flutter
Apeng_091915 小时前
vue+canvas实现按下鼠标绘制箭头
前端·javascript·vue.js
QuantumLeap丶15 小时前
《Flutter全栈开发实战指南:从零到高级》- 21 -响应式设计与适配
android·javascript·flutter·ios·前端框架
chilavert31815 小时前
技术演进中的开发沉思-228 Ajax: Aptana开发
前端·javascript·ajax