elementui 走马灯图片自适应

点击单元格后弹出对话框轮播图片，用Carousel 走马灯实现。
希望图片无论分辨率多少，都能在一屏内显示，这时就要用图片自适应。

图片外层容器，使用 flex 布局，设置对齐方式为主轴、交叉轴居中

display: flex;
align-items: center;
justify-content: center;
图片自适应宽高

max-width: 100%; height-width: 100%

完整的栗子

<template><el-dialog :visible.sync="visible":top="0":modal="true"@close="$emit('update:show', false)"><div align="center"><el-carousel indicator-position="outside" trigger="click" height="90vh"><el-carousel-item class="el-carousel__item" v-for="(p, idx) in imageUrlList" :key="idx"><img class="carousel-image" :src="p | slimPic" /></el-carousel-item></el-carousel></div></el-dialog>
</template><script>
import { slimPic } from '@/utils/qiniu.js'export default {name: 'DialogImageCarousel',props: {// 是否可见show: {type: Boolean,default: false,},// 传入的图片url数组imageUrlList: {type: Array,default(){return []}}},filters: {slimPic},watch: {show(){this.visible = this.show}},data(){return {visible: this.show,}},
}
</script><style lang="scss" scoped>
.el-carousel__item {width: 100%;display: flex;align-items: center;justify-content: center;.carousel-image {max-width: 100%;max-height: 100%;}
}
</style>

转载于:https://www.cnblogs.com/wbjxxzx/p/10069133.html

elementui 走马灯图片自适应相关推荐

Element-ui配合Vue实现走马灯图片自适应效果
elementUI配合Vue实现走马灯图片自适应效果(等比缩放,使得图片缩小不挤压,放大不拉伸变形) 解决方法的原理:监听屏幕视口大小如果'resize',发生改变了,就获取图片的高度height,然 ...
element-ui走马灯实现图片自适应
elementUI走马灯实现图片自适应(等比缩放,使得图片缩小不挤压,放大不拉伸变形) 解决方法的原理:监听屏幕视口大小如果'resize',发生改变了,就获取图片的高度height,然后渲染到页面 ...
element-ui走马灯如何实现图片自适应
问题开发中使用element的走马灯组件遇到图片无法自适应的问题,但是开发中往往需要自适应布局,在此情况下如何实现走马灯的自适应是一个值得解决的问题.尝试多次,直接写css无法实现布局的自适应. 解 ...
走马灯如何实现图片自适应
element-ui走马灯如何实现图片自适应长度和高度自适应屏幕大小最近写vue的时候做轮播图比较多就偷懒用了element中的走马灯功能,发现高度是固定的, 页面缩小会有空隙,我查看了一下官网 ...
Element-UI中走马灯图片无法显示的问题
Element-UI中走马灯图片无法显示的问题废话不多说代码奉上:这里说一下height的大小问题,我放的图片是3200*1250的看了其他帖子上试了很多都不行,后来发现可能就是图片大小的原因然 ...
基于jQuery图片自适应排列显示代码
基于jQuery图片自适应排列显示代码.这是一款基于jquery.flex-images插件实现的类似谷歌图片流效果.效果图如下: 在线预览源码下载实现的代码. html代码: <di ...
微信小程序 --- 图片自适应、本地图片的使用
1.关于图片自适应 image标签中添加mode属性: 默认值:scaleToFill ---- 不保持纵横比例缩放图片,使图片的宽高完全拉伸至填满image标签 aspectFit ---- ...
移动Web开发图片自适应两种常见情况解决方案
本文主要说的是Web中图片根据手机屏幕大小自适应居中显示,图片自适应两种常见情况解决方案.开始吧在做配合手机客户端的Web wap页面时,发现文章对图片显示的需求有两种特别重要的情况,一是对于图集, ...
css实现图片自适应容器的几种方式
css实现图片自适应容器经常有这样一个场景,需要让图片自适应容器的大小. 1.img标签的方式我们马上就能想到,把width.height 设置为100%啊.来看一哈效果. <div cla ...

elementui 走马灯图片自适应

elementui 走马灯图片自适应相关推荐

最新文章

热门文章