公司客户要求图片轮播比例1:1,以前都是写死然后让后台规定比例,以为要用js才能实现,百度一下,居然用css就能实现
html部分
mint-swipe-items-wrap== mt-swipe mint-swipe-item img==img
<mt-swipe @change="handleChange" auto='false'>
<mt-swipe-item>
<img src="../images/error-img.png"/>
</mt-swipe-item>
<mt-swipe-item>
<img src="../images/money3.png"/>
</mt-swipe-item>
<mt-swipe-item>
<img src="../images/money2.png"/>
</mt-swipe-item>
</mt-swipe>
css部分
.mint-swipe-items-wrap{
width: 100%;
height: 0;
padding-bottom: 100%;
overflow: hidden;
}
.mint-swipe-item img{
width: 100%;
height:100%;
}
详情见这两篇文章
纯 CSS 实现高度与宽度成比例的效果
怎样才能“响应式+固定宽高比例”,多余的自动截掉?