图片展示时等比例缩放

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

相关推荐
牛奶11 分钟前
JS随笔:浏览器 API(DOM 与 BOM)
前端·javascript·面试
牛奶26 分钟前
JS随笔:异步编程与事件循环
前端·javascript·面试
牛奶26 分钟前
JS随笔:数据结构与集合
前端·javascript·面试
小陆猿36 分钟前
股票实时行情Echarts动态图表
前端·javascript
牛奶1 小时前
JS随笔:ES6+特性与模块化实践
前端·javascript
牛奶1 小时前
JS随笔:基础语法与控制结构
前端·javascript
前端Hardy1 小时前
HTML&CSS&JS:基于定位的实时天气卡片
javascript·css·html
H0483 小时前
symbol为什么说是为了解决全局变量冲突的问题
javascript
Always_Passion4 小时前
FE视角下的Referrer全面解析
javascript·面试
七牛云行业应用4 小时前
大模型接入踩坑录:被 Unexpected end of JSON 折磨三天,我重写了SSE流解析
javascript·人工智能·代码规范