图片展示时等比例缩放

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

相关推荐
子兮曰36 分钟前
DeepSeek TUI:原生 Rust 打造的终端 AI 编码 Agent
前端·javascript·后端
暗不需求44 分钟前
# 深入 React Todos:从零实现一个状态提升与本地持久化的待办应用
javascript·react.js·全栈
子兮曰1 小时前
深入 Superpowers:180k Stars 的开源 AI 编程方法论是如何工作的
前端·javascript·后端
隔壁的大叔1 小时前
Markdown 渲染如何穿插自定义组件
前端·javascript·vue.js
薯老板1 小时前
JavaScript原型,原型链
javascript
愚者Pro2 小时前
Flutter基础学习
前端·javascript·vue.js
时光足迹2 小时前
Tiptap 简单编辑器模版
前端·javascript·react.js
吴声子夜歌3 小时前
Vue3——使用Mock.js
javascript·vue·mock.js
时光足迹3 小时前
ThreeJS之GUI控制器
前端·javascript·three.js
时光足迹3 小时前
Tiptap编辑器
前端·javascript·react.js