uniapp开发05-image标签的一些使用注意事项

uniapp开发-image标签的一些使用注意事项！接着上次内容进行讲解优化！我们的幻灯片组件内部，image标签的优化操作。让banner图片更加适应浏览器屏幕尺寸。

.swiper{height: 410rpx;margin-top:15rpx;border: 1px solid red;.item{margin-top: 10rpx;padding: 0 20rpx;box-sizing: border-box;image{width: 100%;height: 350rpx;}.info-pic{text-align: center;margin: 0 auto;font-size: 20rpx;color: red;}}}

2：效果优化之后的样子展示：

如图，这时候banner图片看上去已经有点味道了，带有边距！而且居中显示，顶部也有边距，

关键是我们通过调用image标签的特殊属性mode：设置为：aspectFill；可以满足效果：让图片保证短边正常显示，同时自动维持比例！自动裁切长边的内容。

很明显。我们的图片是比较扁平的！所以，它就是会百分百显示高度！宽度这块儿就会自动裁切一些！但是整体上比例是不会紊乱的。

在实际项目开发中！我们可以根据公司要求，或者客户要求！来灵活设置这个参数值。