图片展示时等比例缩放

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

相关推荐
Penge6668 小时前
《Go 后端开发者学 React:组件通信与插槽》
javascript
Penge66610 小时前
《Go 后端开发者学 React:useState》
javascript
Penge66610 小时前
《Go 后端开发者学 React:数据渲染》
javascript
ikoala13 小时前
AI 写页面像说明书,修 Bug 像贴膏药?把这两句话写进 AGENTS.md
前端·javascript·ai编程
Penge66613 小时前
《Go 后端开发者学 TypeScript:ES Module了解》
javascript
Penge66613 小时前
《Go 后端开发者学 TypeScript:从零搭建与运行》
javascript
Penge66614 小时前
《Go 后端开发者学 TypeScript:keyof关键字》
javascript
Penge66615 小时前
《Go 后端开发者学 TypeScript:extends关键字》
javascript
张张123y15 小时前
DSH 插件调试避坑:client.js 设置面板、热重载与高频报错排查表
开发语言·javascript·人工智能·开源·ecmascript·后端开发·ai agent
Penge66620 小时前
《Go 后端开发者学 TypeScript:typescript 类型断言》
javascript