图片展示时等比例缩放

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

相关推荐
我叫张小白。19 分钟前
Vue3监视系统全解析
前端·javascript·vue.js·前端框架·vue3
娃哈哈哈哈呀5 小时前
formData 传参 如何传数组
前端·javascript·vue.js
zhu_zhu_xia6 小时前
vue3+vite打包出现内存溢出问题
前端·vue
2503_928411567 小时前
11.24 Vue-组件2
前端·javascript·vue.js
g***B7388 小时前
JavaScript在Node.js中的模块系统
开发语言·javascript·node.js
思密吗喽8 小时前
宠物商城系统
java·开发语言·vue·毕业设计·springboot·课程设计·宠物
Z***25809 小时前
JavaScript在Node.js中的Deno
开发语言·javascript·node.js
cypking9 小时前
Vue 3 + Vite + Router + Pinia + Element Plus + Monorepo + qiankun 构建企业级中后台前端框架
前端·javascript·vue.js
San30.9 小时前
ES6+ 新特性解析:让 JavaScript 开发更优雅高效
开发语言·javascript·es6
雨雨雨雨雨别下啦10 小时前
【从0开始学前端】vue3简介、核心代码、生命周期
前端·vue.js·vue