mintui轮播——图片设置100%,高度自适应

方法一、

css实现:(此例中图片宽高比例为1:1)

<mt-swipe :auto="4000" style='height: 0;padding-bottom: 100%;width: 100%;'>

        <mt-swipe-item style="height: 0;padding-bottom: 100%;width: 100%;" v-for="item in list" :key="item.id">

            <img :src="item.img" class="swipepic">

        </mt-swipe-item>

      </mt-swipe>   

就是通过padding-top或者padding-bottom实现,高度设置为0。这个属性当它的值为百分比的时候,是按该元素的宽度来计算的。也就是说当设为100%的时候,其高度就等于自身的宽度,形成一个正方形。也就是说可以通过这个来设置已知尺寸比例的图片宽度100%高度自适应。

方法二、

使用js判断图片的宽度得到具体数值之后,再来利用js设置图片的高度,具体实现请打开百度,另外请注意:用js实现的时候需要监控页面缩放变化以达到自适应。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。