图片展示时等比例缩放

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

相关推荐
Hi_kenyon10 小时前
VUE3套用组件库快速开发(以Element Plus为例)二
开发语言·前端·javascript·vue.js
EndingCoder11 小时前
Any、Unknown 和 Void:特殊类型的用法
前端·javascript·typescript
JosieBook12 小时前
【Vue】09 Vue技术——JavaScript 数据代理的实现与应用
前端·javascript·vue.js
华仔啊14 小时前
JavaScript 如何准确判断数据类型?5 种方法深度对比
前端·javascript
程序员小寒15 小时前
从一道前端面试题,谈 JS 对象存储特点和运算符执行顺序
开发语言·前端·javascript·面试
爱健身的小刘同学15 小时前
Vue 3 + Leaflet 地图可视化
前端·javascript·vue.js
神秘的猪头15 小时前
Ajax 数据请求:从零开始掌握异步通信
前端·javascript
黛色正浓16 小时前
leetCode-热题100-贪心合集(JavaScript)
javascript·算法·leetcode
卡尔特斯16 小时前
CSS 特殊符号 / 英文导致换行问题速查表
css
Komorebi゛16 小时前
【CSS】斜角流光样式
前端·css