图片展示时等比例缩放

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

相关推荐
whinc11 分钟前
Node.js技术周刊 2026年第18周
javascript·node.js
whinc18 分钟前
JavaScript技术周刊 2026年第16周
javascript
刃神太酷啦21 分钟前
扒透 STL 底层!map/set 如何封装红黑树?迭代器逻辑 + 键值限制全手撕----《Hello C++ Wrold!》(23)--(C/C++)
java·c语言·javascript·数据结构·c++·算法·leetcode
whinc25 分钟前
Node.js技术周刊 2026年第15周
javascript·node.js
一起养小猫26 分钟前
HTML5+CSS3+JavaScript实现高木同学圣诞树GalGame完整开发指南
javascript·css3·html5·galgame
前端若水33 分钟前
过渡(transition)高级:贝塞尔曲线、硬件加速
前端·css·css3