图片展示时等比例缩放

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

相关推荐
蓝莓味的口香糖18 小时前
【VUE】【CSS】Vue移动端适配主流方案总结
前端·css·vue.js
上火的金鱼妹18 小时前
关于多进程sse连接通知的实战
javascript·状态模式·sse
console.log('npc')19 小时前
问题跟踪与知识沉淀:从任务到知识的闭环)
前端·javascript·人工智能
missile11119 小时前
# HDR 算法 ISP 通路客制化方案(G100 / mt6789)
java·前端·javascript
挖掘狂人19 小时前
Vue nextTick 到底在等什么?一篇讲透原理与那些年踩过的坑
javascript·程序员·编程语言
codigger19 小时前
Vue nextTick 到底在等什么?一篇讲透原理与那些年踩过的坑
程序员·vue·编程·异步更新·#人工智能
万少20 小时前
Harmony 7.0 这个skill帮你自动化操作AGC
前端·javascript·后端
小大宇20 小时前
Vue知识点-ElementPlus-02图标
前端·javascript·vue.js
是立不是利20 小时前
CSS 的 Flex 布局——为什么元素没有按我想的排列
前端·css
谙忆102421 小时前
图像任务超时怎么重试:先分执行状态,再做结果验收
javascript