uni-app框架swiper里面图片大小自适应问题（5+app端无法适应问题）

蔚落 2021-07-26 23:28 2281阅读 0赞

## uni-app 程序示例 ##

图片显示采用了image组件，设置image组件的scaleToFill模式（不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素）

swiper布局代码：

样式代码：

.uni-margin-wrap { 
     	
    	height:100%;
     	margin:0 0upx;
     }
     .swiper { 
     	height: 300upx;
     }
     .swiper-item { 
     	display: block;
        line-height: 300upx;
     	text-align: center;
     }
     /*图片宽度设置100% ，高度300upx（设为auto图片无法显示）*/
     .swiper-image{   
         width:100%;  
         height:300upx; 
     }

**image组件**详细参考 官方文档：[https://uniapp.dcloud.io/component/image][https_uniapp.dcloud.io_component_image]

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70]

[https_uniapp.dcloud.io_component_image]: https://uniapp.dcloud.io/component/image
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70]: /images/20210726/e5eff989db434d1380c3511ec9210b0a.png