图片展示时等比例缩放

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

相关推荐
VcB之殇17 小时前
popstate监听浏览器的前进后退事件
前端·javascript·vue.js
宁雨桥18 小时前
Vue组件初始化时序与异步资源加载的竞态问题实战解析
前端·javascript·vue.js
成为大佬先秃头18 小时前
渐进式JavaScript框架:Vue 过渡 & 动画 & 可复用性 & 组合
开发语言·javascript·vue.js
GISer_Jing18 小时前
Taro跨端开发实战:JX首页实现_Trae SOLO构建
前端·javascript·aigc·taro
星月心城19 小时前
面试八股文-JavaScript(第四天)
开发语言·javascript·ecmascript
喝拿铁写前端19 小时前
AI 驱动前端开发覆盖的能力全景拆解
前端·javascript·人工智能
不染尘.19 小时前
应用层之WWW
服务器·javascript·css·网络·网络协议·计算机网络·html
KLW7519 小时前
vue v-for 列表渲染指令注意
前端·javascript·vue.js
zhengxianyi51519 小时前
vue 首屏加载优化
前端·javascript·vue.js·nginx·gzip·expires·静态文件缓存
John_ToDebug19 小时前
从 window.external 到 Mojo深度解析 Chromium 中 JS 与 C++ 的 7 种通信机制
javascript·chrome·mojo