图片展示时等比例缩放

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

相关推荐
冰暮流星18 分钟前
javascript之对象的建立-使用Object
开发语言·javascript·ecmascript
AI_零食21 分钟前
呼吸灯 - 通过鸿蒙PC Electron框架技术完成-在焦虑时代守护每一次呼吸的数字禅修
前端·javascript·华为·electron·前端框架·鸿蒙
ZC跨境爬虫39 分钟前
跟着 MDN 学JavaScript day_5:技能测试——变量实战
java·开发语言·前端·javascript
HjhIron1 小时前
深入理解 JavaScript 执行机制:从编译到运行的完整揭秘
javascript
云水一下1 小时前
TypeScript 从零基础到精通(四):面向对象编程(类与继承)
javascript·typescript
shmily麻瓜小菜鸡1 小时前
Bootstrap 4 常用工具类速查表
前端·javascript·bootstrap
CDN3601 小时前
【架构进阶】告别配置漂移!用 NodeNext + Workspace 打造优雅的 TypeScript Monorepo
前端·javascript·typescript
超人不会飞_Jay1 小时前
6.2前端笔记
前端·javascript·笔记
希冀1231 小时前
【CSS学习第八篇】
css·学习·tensorflow
用户059540174462 小时前
用LangChain+Chroma实现RAG多轮对话记忆与自动化测试,把bug发现时间从2小时压缩到5分钟
前端·css