解决swiper的自适应图片高度问题的方法,一句CSS搞定。

解决swiper的自适应图片高度问题的方法,一句CSS搞定。

浏览次数:
作者: 墨鱼
信息来源: 本站原创
更新日期: 2022-07-04 17:16:01
文章简介

轻松解决swiper图片高度自适应难题,只需一句CSS代码,即可实现灵活适应各种屏幕尺寸。无需复杂设置,让你的网页展示更加美观,用户体验更加流畅。简单高效,赶快尝试吧!

  • 正文开始
  • 相关阅读
  • 推荐作品

最近在写项目中用到swiper做标签页切换,因每个标签页的内容不一样,所以需要自适应高度,根据官方API在swiper中添加 autoHeight: true ,但是并没有什么卵用,是ajax的原因还是我自定义个一些样式覆盖掉了swiper.css中的某些样式这个我没有去研究。

期间也试过了像:

overflow: hidden;

overflow: auto !important;

都没有用。

接下来说一下我的自适应高度的实现,在自己的css中添加:

.swiper-slide{height:1px} /* 随意指定一个height值即可 */    

.swiper-slide-active { height:auto}

完美解决。下面是效果图:

解决swiper的自适应图片高度问题的方法,一句CSS搞定。

 

解决swiper的自适应图片高度问题的方法,一句CSS搞定。

发一个自适应的货源网常用通用的文章内容头部模板样式代码
« 上一篇 2022年03月08日
HTML+JS点击复制文字效果(包含点击复制多行)最简单代码
下一篇 » 2022年08月28日

如本文对您有帮助,就请墨鱼抽根烟吧!