图片展示时等比例缩放

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

相关推荐
掘金安东尼13 分钟前
Vercel:我们为 React2Shell 发起了一项价值 100 万美元的黑客挑战
前端·javascript·github
掘金安东尼15 分钟前
浏览器处理Base64数据的速度有多快?
前端·javascript·github
掘金安东尼16 分钟前
为不同场景设计多样化的页面过渡动画
前端·javascript·github
持续升级打怪中23 分钟前
深入解析深浅拷贝:原理、实现与最佳实践
开发语言·前端·javascript
我有一棵树23 分钟前
空值合并运算符 ?? ,|| 的替代方案
前端·javascript
chilavert31829 分钟前
技术演进中的开发沉思-278 AJax :Rich Text(上)
前端·javascript·ajax
Jay丶33 分钟前
*** 都不用tailwind!!!哎嘛 真香😘😘😘
前端·javascript·react.js
Tomorrow'sThinker40 分钟前
篮球裁判犯规识别系统(四) foul_fn函数 上
java·前端·javascript
普通网友1 小时前
用 Next.js 15 做图片查看网站:图片双击放大的交互坑与修复
开发语言·javascript·交互
瞎子拍照1 小时前
echarts自定义主题样式与组件配置、数据滚动条和数据自动轮播功能
前端·javascript·echarts