图片展示时等比例缩放

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

相关推荐
Amumu121381 小时前
Vue脚手架(二)
前端·javascript·vue.js
lichenyang4532 小时前
从零开始构建 React 文档系统 - 完整实现指南
前端·javascript·react.js
比特森林探险记2 小时前
Hooks、状态管理
前端·javascript·react.js
比特森林探险记3 小时前
组件通信 与 ⏳ 生命周期
前端·javascript·vue.js
海绵宝龙3 小时前
Vue中nextTick
前端·javascript·vue.js
H_z_q24013 小时前
Web前端制作一个评论发布案例
前端·javascript·css
摘星编程4 小时前
React Native + OpenHarmony:useId唯一标识生成
javascript·react native·react.js
2603_949462104 小时前
Flutter for OpenHarmony社团管理App实战:消息中心实现
android·javascript·flutter
iRuriCatt4 小时前
智慧景区管理系统 | 计算机毕设项目
java·前端·spring boot·vue·毕设
萧曵 丶5 小时前
JavaScript 函数各种写法和场景
开发语言·javascript·ecmascript