图片展示时等比例缩放

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

相关推荐
xiaoxue..几秒前
LeetCode 第 15 题:三数之和
前端·javascript·算法·leetcode·面试
flashlight_hi3 分钟前
LeetCode 分类刷题:101. 对称二叉树
javascript·算法·leetcode
码力巨能编7 分钟前
Markdown 作为 Vue 组件导入
前端·javascript·vue.js
xiaoxue..27 分钟前
哨兵节点与快慢指针解决链表算法难题
前端·javascript·数据结构·算法·链表
尽欢i32 分钟前
踩过坑才懂:前端生成唯一 ID,别用 Date.now ()了!一行代码搞定
前端·javascript
JS_GGbond33 分钟前
解锁 JavaScript 对象的“魔法宝箱”:这些方法让你玩转对象操作
前端·javascript
Doris89335 分钟前
【JS】JS进阶--编程思想、面向对象构造函数、原型、深浅拷贝、异常处理、this处理、防抖节流
开发语言·javascript·ecmascript
福大大架构师每日一题38 分钟前
rust 1.92.0 更新详解:语言特性增强、编译器优化与全新稳定API
java·javascript·rust
Можно44 分钟前
ES6扩展运算符:从基础到实战的全方位解析
前端·javascript
豆苗学前端1 小时前
闭包、现代JS架构的基石(吊打面试官)
前端·javascript·面试