css 移動端圖片等比顯示處理

   第一次寫博文，心情有點小小的激動~~~~~

   剛開始做移動端項目的時候遇到了一些優化的問題，比如，打開網頁在2g或者3g的情況下加載網頁，剛開始渲染的時候，遇到圖片文件未請求，圖片的高度會為0，當然，如果你給定圖片的高度的時候就不會有這樣的情況，這樣會出現渲染過程不平緩的情況。

類似這樣。

   之后查詢了網上的一些相關資料，發現用rem可以實現寬度等比，但是項目已經基本完成，所以這個辦法也是走不通了。。。@@

   最后用樂另外一種

<div class="headimg">
            <div class="headimgKs">
            </div>
        </div>
<style>
.headimg {
    width: 100%;
    height: 0;
    position: relative;
    padding-bottom: 40%;
}
.headimgKs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(1.jpg) no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;
}
</style>

    試過之后發現效果極佳，原理是利用背景圖和絕對定位和padding-bottom屬性的百分比值是根據容器寬度進行計算，也就是說容器寬度為320px，padding-bottom：40%就是128px，這樣就實現了等比顯示圖片。

    后期又在此基礎上實現了一些優化，比如沒有圖片時的提醒

<div class="guanggaoBanner">
<i>暫無圖片</i>
<div  class="right-img">
</div>
</div>
<style>
.guanggaoBanner {
    position: relative;
    width: 94%;
    height: 0;
    padding-bottom: 50%;
    background-color: #ddd;
}
.guanggaoBanner i {
    position: absolute;
    top: 45%;
    left:0;
    text-align: center;
    width: 100%;
    color: #000;
}
.right-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(1.jpg);
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
}
</style>

　　或者是沒有圖片的時候給定一張默認圖，在第一個例子的基礎上把背景圖改為 background: url(1.jpg),url('默認圖') ;

寫得不好的地方還請大家不吝賜教哈，3Q