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