1、從上圖知道原始圖片大小是 800 * 250，即寬高比為 3.2；
2、html 及 css 代碼如下，
可以知道就只是在一個div里面放了一張圖片，那么如何讓這張圖片的寬高比固定呢，看了css之后就知道了原來是神奇的padding幫了我們的忙。
3、當img的寬度為100%時，那么.banner的padding-bottom（padding-top也可以）的值為 100%（圖片想要設置的寬度） / 3.2（圖片的原始寬高比）= 31.25%；
（如果你想把 img 的寬度設為50%的話，那么padding-bottom的值為 50% / 3.2 = 15.625%；）
4、最終結果為：
看圖片可以知道自適應后的寬高比 320 / 100 = 800 / 250 （原始寬高比）。
tips: 文章可能寫的不好，還望見諒。
有疑問可以留言，看到了之后一定回復。