图片展示时等比例缩放

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

相关推荐
Aerelin8 小时前
爬虫playwright入门讲解
前端·javascript·html·playwright
笙年9 小时前
JavaScript Promise,包括构造函数、对象方法和类方法
开发语言·javascript·ecmascript
桜吹雪9 小时前
LangChain.js/DeepAgents可观测性
javascript·人工智能
灵魂学者9 小时前
Vue3.x —— 父子通信
前端·javascript·vue.js·github
芳草萋萋鹦鹉洲哦10 小时前
【vue/js】文字超长悬停显示的几种方式
前端·javascript·vue.js
开发者小天11 小时前
React中的 闭包陷阱
前端·javascript·react.js
国服第二切图仔11 小时前
Electron for 鸿蒙pc项目实战之tab标签页组件
javascript·electron·harmonyos·鸿蒙pc
Neptune112 小时前
深入浅出:理解js的‘万物皆对象’与原型链
前端·javascript
阿迷不想上班12 小时前
windows自动任务定期执行
javascript
盗德12 小时前
最全音频处理WaveSurfer.js配置文档
前端·javascript