图片展示时等比例缩放

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

相关推荐
信看1 分钟前
NMEA-GNSS-RTK 定位html小工具
前端·javascript·html
爱吃大芒果10 分钟前
Flutter 主题与深色模式:全局样式统一与动态切换
开发语言·javascript·flutter·ecmascript·gitcode
king王一帅31 分钟前
流式渲染 Incremark、ant-design-x markdown、streammarkdown-vue 全流程方案对比
前端·javascript·人工智能
Bigger2 小时前
Coco AI 技术演进:Shadcn UI + Tailwind CSS v4.0 深度迁移指南 (踩坑实录)
前端·css·weui
踢球的打工仔2 小时前
jquery的基本使用(3)
前端·javascript·jquery
徐同保3 小时前
js 点击按钮 把文本转成文件并下载下来
开发语言·javascript·ecmascript
bug总结3 小时前
前端开发中为什么要使用 URL().origin 提取接口根地址
开发语言·前端·javascript·vue.js·html
程序员爱钓鱼4 小时前
Node.js 编程实战:数据库连接池与性能优化
javascript·后端·node.js
Gomiko4 小时前
JavaScript DOM 原生部分(二):元素内容修改
开发语言·javascript·ecmascript