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