图片展示时等比例缩放

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

相关推荐
csdn飘逸飘逸39 分钟前
Autojs基础-控件操作
javascript
下北沢美食家1 小时前
Express框架入门
开发语言·javascript·express
毕设源码-钟学长1 小时前
【开题答辩全过程】以 基于Vue的租房App为例,包含答辩的问题和答案
前端·javascript·vue.js
旭日跑马踏云飞3 小时前
【Nginx】相关优化
运维·javascript·nginx
webkubor3 小时前
2026 年 把网页交互的主控权拿回前端手中 🚀
前端·javascript·人工智能
Lee川3 小时前
Promise:驾驭 JavaScript 异步编程的艺术
javascript
Desirediscipline3 小时前
#include<limits>#include <string>#include <sstream>#include <iomanip>
java·开发语言·前端·javascript·算法
SuperEugene3 小时前
手把手写几种常用工具函数:深拷贝、去重、扁平化
前端·javascript·面试
wuhen_n4 小时前
副作用的概念与effect基础:Vue3响应式系统的核心
前端·javascript·vue.js
张3蜂4 小时前
Vue.js-知识体系
前端·javascript·vue.js