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%