图片展示时等比例缩放

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

相关推荐
狗狗摇屁屁2 小时前
JS手写防抖
开发语言·javascript·ecmascript
清风细雨_林木木2 小时前
Chart.js和 Echart的区别
开发语言·javascript·ecmascript
沐泽__2 小时前
iframe内嵌页面双向通信
前端·javascript·chrome
小北方城市网2 小时前
第4 课:Vue 3 路由与状态管理实战 —— 从单页面到多页面应用
前端·javascript·vue.js
interception3 小时前
爬虫逆向,瑞数6,补环境,国家专利
javascript·爬虫·python·网络爬虫
Dragon Wu3 小时前
TailWindCss 核心功能总结
前端·css·前端框架·postcss
lcc1873 小时前
CSS 隐藏元素的方式
css
掘金安东尼3 小时前
顶层元素问题:popover vs. dialog
前端·javascript·面试
掘金安东尼3 小时前
React 的新时代已经到来:你需要知道的一切
前端·javascript·面试
1024肥宅4 小时前
现代 JavaScript 特性:TypeScript 深度解析与实践
前端·javascript·typescript