图片展示时等比例缩放

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

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