图片展示时等比例缩放

通过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如何集成封装Axios
前端·javascript·vue.js
不是az7 分钟前
CSS知识点记录
前端·javascript·css
昵称暂无144 分钟前
.NET 高级开发 | i18n 原理、实现一个 i18n 框架
javascript·c#·.net
h_jQuery1 小时前
vue使用gm-crypto对数据进行sm4加密处理
前端·javascript·vue.js
阿赛工作室2 小时前
Vue中onBeforeUnmount不触发的解决方案
前端·javascript·vue.js
浩星2 小时前
electron系列1:Electron不是玩具,为什么桌面应用需要它?
前端·javascript·electron
疯笔码良3 小时前
【Vue】自适应布局
javascript·vue.js·css3
浩星3 小时前
electron系列2:搭建专业Electron开发环境
javascript·typescript·electron
酒鼎4 小时前
学习笔记(12-02)事件循环 - 实战案例 —⭐
前端·javascript
小恰学逆向4 小时前
【爬虫JS逆向之旅】某球网参数“md5__1038”逆向
javascript·爬虫