图片展示时等比例缩放

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

相关推荐
在下Z.8 小时前
前端基础--css(1)
前端·css
我是日安8 小时前
从零到一打造 Vue3 响应式系统 Day 27 - toRef、toRefs、ProxyRef、unref
前端·javascript·vue.js
不如喫茶去8 小时前
VUE查询-历史记录功能
前端·javascript·vue.js
小帆聊前端8 小时前
CSS 选择器全解析:从基础语法到组件库样式修改,解决前端样式定位难题
css
一枚前端小能手8 小时前
「周更第8期」实用JS库推荐:decimal.j
前端·javascript
Tech_Lin8 小时前
JavaScript Date时间对象的常用操作方法总结
前端·javascript
一枚前端小能手9 小时前
🚫 请求取消还在用flag?AbortController让你的异步操作更优雅
前端·javascript
JohnYan9 小时前
工作笔记 - VSCode ssh远程开发
javascript·ssh·visual studio code
shayudiandian9 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
Mintopia9 小时前
🧩 隐私计算技术在 Web AIGC 数据处理中的应用实践
前端·javascript·aigc