图片展示时等比例缩放

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

相关推荐
艾小码8 小时前
Vue 3 defineProps 与 defineEmits 深度解析
前端·javascript·vue.js
前端炒粉11 小时前
35.LRU 缓存
开发语言·javascript·数据结构·算法·缓存·js
lumi.13 小时前
Vue + Element Plus 实现AI文档解析与问答功能(含详细注释+核心逻辑解析)
前端·javascript·vue.js·人工智能
S***t71415 小时前
Vue面试经验
javascript·vue.js·面试
粉末的沉淀15 小时前
css:制作带边框的气泡框
前端·javascript·css
p***h64317 小时前
JavaScript在Node.js中的异步编程
开发语言·javascript·node.js
N***738517 小时前
Vue网络编程详解
前端·javascript·vue.js
西游音月17 小时前
(4)pytest+Selenium自动化测试-元素定位之CSS Selector定位
css·selenium·pytest
q***385118 小时前
TypeScript 与后端开发Node.js
javascript·typescript·node.js
Nan_Shu_61419 小时前
学习:Sass
javascript·学习·es6