css 让图片按自身比例适应元素宽度-移动端

如果一张图片的比例是 4比1 ，在不设置固定宽高的时候，如何实现？

页面结构

<div class="wrapper">
    <img
        class="swiper-img"
        src="http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20199/3ff47fa622d07edad492c2859a5ad32f.jpg_750x200_3df30168.jpg"
        alt="去哪儿门票"
    >
</div>

图片宽高是750*200，比例是 1/0.2667

整个图片是这样的

如果什么也不设置页面显示是这样的

下面设置css样式

// 先设置包裹div的元素大小
.wrapper {
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-bottom: 26.67%;
}

// 然后设置img宽度 100%即可
.swiper-img {
    width: 100%;
}

注：
    1. padding-bottom 设置的是高度，它的百分比是依据 wrapper的父元素宽度设置的，
       比如：父元素宽度是窗口的 70%，那么 padding-bottom 的百分比就是窗口宽度
            的 70% 的 26.67% 。

设置css完成后页面就ok了 ,为了演示padding-bottom是以父元素的宽度进行设置，我将父元素设置 width:70%