前提摘要:使用vue很方便做一些效果,目前开源的组件特别的多pc端使用轮播图的话element-ui的carousel是一个不错的选择,当然也可以选择swiper组件。
问题:我发现carousel组件容器的高度是固定写死的,就算是我把image图片的宽度设置100%,它会随着浏览器屏幕的宽度等比例缩小到我设置的最小宽度就不会再变小。但是因为外面的容器已经写死了一个高度,这样的话就会留有一片空白区域。如下:
解决思路:获取当前图片的高度然后赋给swiper外部容器的高度,然后flex布局容器里面的图片居中。
问题解决:这是我的自己的解决方案,大家有更好的可以留言谢谢。
1,template html代码
<div class="swiper">
<el-carousel indicator-position="none" arrow="always" :height</