图片展示时等比例缩放

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

相关推荐
3824278276 分钟前
Edge开发者工具:保留日志与禁用缓存详解
java·前端·javascript·python·selenium
web小白成长日记16 分钟前
什么是margin重叠,如何解决
前端·css·html·css3
莫生灬灬18 分钟前
VueMultiBrowser - 开源多浏览器管理器
运维·开发语言·chrome·c#·自动化·vue
java porter24 分钟前
系统架构设计之单例模式(下)
开发语言·javascript·单例模式
两个西柚呀31 分钟前
每日前端面试题-css塌陷
前端·css
C_心欲无痕36 分钟前
react - createPortal魔法传送门
javascript·vue.js·react.js
前端小L38 分钟前
双指针专题(五):灵活的起跳——「无重复字符的最长子串」
javascript·算法·双指针与滑动窗口
靓仔建1 小时前
在Electron用npm install 失败。
javascript·electron·npm
沛沛rh452 小时前
React 学习笔记:State、hook —— 组件的记忆
前端·javascript·react.js
前端小L9 小时前
双指针专题(三):去重的艺术——「三数之和」
javascript·算法·双指针与滑动窗口