图片展示时等比例缩放

通过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 小时前
utils.js 说明文档
开发语言·javascript·ecmascript
zyplayer-doc5 小时前
VuePress类静态文档站和动态知识库怎么选:两种技术路线的适用场景
javascript·人工智能·后端·安全·智能手机
用户059540174468 小时前
LangChain Memory 测试踩坑实录:用 pytest 自动化回归对话记忆,我折腾了整整一个周末
前端·css
码哥DFS9 小时前
构造函数、实例对象、对象原型 ----三者关系
开发语言·javascript·原型模式
满栀58510 小时前
vue动态路由效果
前端·javascript·vue.js·前端框架·vue
jjw_zyfx11 小时前
css vue vite实现闪烁的呼吸效果
javascript·css·vue.js
sunly_12 小时前
React useActionState 的用法详解
前端·javascript·react.js
cyadyx12 小时前
【Three.js】Three.js 中加载 3D 模型
前端·javascript·3d
汉堡大王952712 小时前
前端工程师 TypeScript 上手指南:一条清晰的从入门到精通路线
前端·javascript·react.js
wear工程师12 小时前
防抖为什么会失效?React 面试里的闭包和定时器
javascript·react.js