图片展示时等比例缩放

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

相关推荐
over69726 分钟前
🌟 JavaScript 数组终极指南:从零基础到工程级实战
前端·javascript·前端框架
源猿人28 分钟前
前端批量请求的并发控制与工程化实践
javascript
hey_ner28 分钟前
进度条图表简单化
前端·css·css3
weipt1 小时前
关于vue项目中cesium的地图显示问题
前端·javascript·vue.js·cesium·卫星影像·地形
懒大王、1 小时前
Vue3 + OpenSeadragon 实现 MRXS 病理切片图像预览
前端·javascript·vue.js·openseadragon·mrxs
程序员小李白1 小时前
动画2详细解析
前端·css·css3
诗意地回家1 小时前
淘宝小游戏反编译
开发语言·前端·javascript
徐同保1 小时前
react两个组件中间加一个可以拖动跳转左右大小的功能
前端·javascript·react.js
bjzhang752 小时前
使用 HTML + JavaScript 实现在线知识挑战
前端·javascript·html
重铸码农荣光2 小时前
CSS 也能“私有化”?揭秘模块化 CSS 的防坑指南(附 Vue & React 实战)
前端·css·vue.js