图片展示时等比例缩放

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

相关推荐
Never_Satisfied30 分钟前
在JavaScript / HTML中,在html的元素中寻找第X个某元素
开发语言·javascript·html
CappuccinoRose1 小时前
CSS 语法学习文档(十七)
前端·css·学习·布局·houdini·瀑布流布局·csspaintingapi
keyborad pianist1 小时前
Web开发 Day1
开发语言·前端·css·vue.js·前端框架
Never_Satisfied1 小时前
在HTML & CSS中,可能导致父元素无法根据子元素的尺寸自动调整大小的情况
前端·css·html
Never_Satisfied2 小时前
在HTML & CSS中,img标签固定宽度时,img和图片保持比例缩放
前端·css·html
颜酱2 小时前
滑动窗口算法通关指南:从模板到实战,搞定LeetCode高频题
javascript·后端·算法
咕噜咕噜啦啦3 小时前
JavaScript基础
开发语言·javascript
lyyl啊辉3 小时前
4. Vue-Router机制
vue
yuezhilangniao3 小时前
从Next.js到APK:Capacitor跨平台(安卓端)打包完全指南
android·开发语言·javascript