在響應(yīng)式網(wǎng)頁設(shè)計（指可以自動識別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計）中，我們不用指定圖片寬度和高度，而是使它們更有彈性：img{max-width:100％;}。因此，為了獲得響應(yīng)式圖像提供的靈活性，我們需要犧牲一些渲染速度。
我相信大家已經(jīng)經(jīng)歷過網(wǎng)絡(luò)不好時的網(wǎng)頁重排現(xiàn)象：加載一個頁面讀取，在向下滾動時，內(nèi)容看似“上下跳動”，這就是網(wǎng)頁重排。這是因為瀏覽器不知道圖像的尺寸，不能保留空間為它。因此，當圖像被加載，它必須將其插入到頁面中，并把它下面和右面的東西移走，做一個重排。
解決此問題的一個先決條件是，要知道圖片的高寬。下面解釋這個技術(shù)。
不再是img{max-width:100%}
這是不使用響應(yīng)式網(wǎng)頁設(shè)計最根本的東西之一，相反，將使用的是響應(yīng)式嵌入技術(shù)。意思是，我們在圖片周圍設(shè)置封套一個DIV，使用“padding-bottom”方法，使DIV保持一定的高寬。
標記是
<div class="embed-container ratio-16-9">
<img src="imgage.jpg"/>
</div>
這個CSS，添加一些我們在代碼中能使用的長寬比：
.embed-container {
position: relative;
height: 0;
overflow: hidden;
background-color:black;
}
.ratio-16-9{
padding-bottom:56.25%; /* 9/16*100 */
}
.ratio-4-3{
padding-bottom:75%; /* 3/4*100 */
}
.ratio-1-1{
padding-bottom:100%; /* ... */
}
然后，要做的事情只是設(shè)置圖片的位置：絕對位置和靠上、靠左對齊。
.embed-container img{
position: absolute;
top: 0;
left: 0;
width:100%;
}
你也可以使用預(yù)處理計算填充：
@ratio-16-9: (9%/16%*100%);
@ratio-4-3: (3%/4%*100%);
@ratio-1-1: (100%);
.ratio-16-9{padding-bottom: @ratio-16-9;}
.ratio-4-3{padding-bottom: @ratio-4-3;}
.ratio-1-1{padding-bottom: @ratio-1-1;}
max-width是怎樣的？
由于div的高度是居于上一級div的寬度來計算的，我們需要設(shè)置上一級div的max-width來限制圖片大小，這可能是個缺點，但由于這整個技術(shù)是居于你所知道的圖片，應(yīng)該是可能的。
結(jié)果-演示
如果我們使用這個技術(shù)，模擬使用一個慢連接，就會發(fā)現(xiàn)，我們現(xiàn)在有為圖片保留空間（使用黑色背景，然后向下滾動，以體驗重排），結(jié)果是演示沒有重排！
在這個技術(shù)里，我們?yōu)轫憫?yīng)內(nèi)容保留空間，而不需要指定寬高的像素，也不使用Javascript來計算尺寸。
相關(guān)知識
減少網(wǎng)頁重排的幾個建議
- 如果想設(shè)定元素的樣式，通過改變元素的 class 名 (盡可能在 DOM 樹的最里層)（Change classes on the element you wish to style (as low in the dom tree as possible)）
- 避免設(shè)置多項內(nèi)聯(lián)樣式（Avoid setting multiple inline styles）
- 應(yīng)用元素的動畫，使用 position 屬性的 fixed 值或 absolute 值（Apply animations to elements that are position fixed or absolute）
- 權(quán)衡平滑和速度（Trade smoothness for speed）
- 避免使用 table 布局（Avoid tables for layout）
- 避免使用CSS的 JavaScript 表達式 (僅 IE 瀏覽器)（Avoid JavaScript expressions in the CSS (IE only)）
