图片展示时等比例缩放

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

相关推荐
利刃大大5 小时前
【Vue】Vue2 和 Vue3 的区别
前端·javascript·vue.js
Lhuu(重开版5 小时前
JS:正则表达式和作用域
开发语言·javascript·正则表达式
yuguo.im7 小时前
我开源了一个 GrapesJS 插件
前端·javascript·开源·grapesjs
安且惜7 小时前
带弹窗的页面--以表格形式展示
前端·javascript·vue.js
米奇妙妙wuu7 小时前
css实现文字和边框同样的渐变色效果
css·html·css3
摘星编程8 小时前
用React Native开发OpenHarmony应用:NFC读取标签数据
javascript·react native·react.js
AGMTI10 小时前
webSock动态注册消息回调函数功能实现
开发语言·前端·javascript
不吃香菜的猪10 小时前
使用@vue-office/pdf时,pdf展示不全
javascript·vue.js·pdf
wuhen_n11 小时前
TypeScript的对象类型:interface vs type
前端·javascript·typescript
css趣多多11 小时前
props,data函数,computed执行顺序
前端·javascript·vue.js