图片展示时等比例缩放

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

相关推荐
LCG元1 小时前
STM32实战:基于STM32F103的Bootloader设计与IAP在线升级
javascript·stm32·嵌入式硬件
前端一小卒3 小时前
前端工程师的全栈焦虑,我用 60 天治好了
前端·javascript·后端
coderyi5 小时前
LLM Agent 浅析
前端·javascript·人工智能
我叫黑大帅5 小时前
TypeScript 6.0 弃用选项错误 TS5101 解决方法
javascript·后端·面试
科雷软件测试5 小时前
使用python+Midscene.js AI驱动打造企业级WEB自动化解决方案
前端·javascript·python
We་ct5 小时前
LeetCode 120. 三角形最小路径和:动态规划详解
前端·javascript·算法·leetcode·typescript·动态规划
changshuaihua0018 小时前
React 入门
前端·javascript·react.js
掘金安东尼8 小时前
本周前端与 AI 技术情报|前端下一步 #462
前端·javascript·面试
qq_12084093718 小时前
Three.js 工程向:实例化渲染 InstancedMesh 的批量优化
前端·javascript
WebInfra9 小时前
Rspack 2.0 正式发布!
前端·javascript·前端框架