【招招制敌】修改element-ui中el-image 预览图大小的默认尺寸,让展示效果更加有呼吸感

本文介绍如何调整ElementUI中el-image的预览图大小,解决视觉冲击,通过修改全局样式实现更佳用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

【招招制敌】修改element-ui中el-image 预览图大小的默认尺寸,让展示效果更加有呼吸感

1、问题(需求)

在未修改前,el-image 预览图大小的默认尺寸是全屏显示。这样给人没有呼吸感。
在这里插入图片描述

2、解决

2.1 深度修改不起效

首先先到的就是通过类选择器选中进行修改,但不见效。

<style lang="css" scoped>

/deep/ .el-image-viewer__wrapper .el-image-viewer__canvas .img{
   transform: scale(0.6) rotate(0deg);
 }

</style>

2.2 修改全局样式

修改全局样式

最外层的封装定位方式由固定改为绝对,画布的定位方式改为绝对,高度改为原来的80%,距离外层容器的高度偏移改为10%

.el-image-viewer__wrapper{
  position: absolute;
  .el-image-viewer__canvas{
    position: absolute;
    height: 80%;
    top: 10%;
  }
}

3、效果

如图所示,呼吸感蹭一下就上来了。

在这里插入图片描述

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

追寻上飞

鼓励一下这只勤劳的小蜜蜂吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值