图片展示时等比例缩放

通过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 小时前
BOM模型
开发语言·前端·javascript·bom
二哈喇子!5 小时前
Vue2 监听器 watcher
前端·javascript·vue.js
摘星编程6 小时前
在OpenHarmony上用React Native:ActionSheet确认删除
javascript·react native·react.js
2501_944521597 小时前
Flutter for OpenHarmony 微动漫App实战:推荐动漫实现
android·开发语言·前端·javascript·flutter·ecmascript
Amumu121387 小时前
Vue核心(三)
前端·javascript·vue.js
Irene19918 小时前
JavaScript中,为什么需要手动清理事件
javascript·手动清理事件监听器
摘星编程8 小时前
OpenHarmony环境下React Native:Zustand持久化存储
javascript·react native·react.js
2501_944521598 小时前
Flutter for OpenHarmony 微动漫App实战:图片加载实现
android·开发语言·前端·javascript·flutter·php
摘星编程8 小时前
在OpenHarmony上用React Native:Recoil选择器异步数据
javascript·react native·react.js
雨中深巷的油纸伞8 小时前
vue 项目部署到iis后 浏览器刷新404
前端·javascript·vue.js