|
處理響應(yīng)式布局中背景圖片的簡單方法是等比例縮放背景圖片,。我們知道寬度設(shè)為百分比的 <img> 元素，其高度會(huì)隨著寬度的變化自動(dòng)調(diào)整,，且其寬高比不變,。如果想在背景圖片中實(shí)現(xiàn)同樣的效果，我們必須先解決如何保持HTML元素的寬高比,。 固定寬高比我們將用到一個(gè)保持元素寬高比的技巧：為元素添加垂直方向的padding值,，padding值使用百分比。這是因?yàn)榇怪狈较虻膒adding取值使用百分比時(shí),，其值是相對(duì)于包含塊的寬度而定的[參考Box model],。這個(gè)技巧最早在Creating Intrinsic Ratios for Video一文中用來創(chuàng)建固有比率的視頻，查看demo,。
假設(shè)我們有一張800*450px的圖片,，我們需要?jiǎng)?chuàng)建一個(gè)元素在其寬度變化時(shí)，它的寬高比仍保持16:9,。代碼如下： <div class="column"> <div class="figure"></div> </div> .column{
max-width: 800px;
}
.figure{
padding-top: 56.25%; /* 450px/800px = 0.5625 */
}
添加背景圖片上面我們實(shí)現(xiàn)了元素縮放并保持寬高比,。但是此時(shí)如果我們添加了背景圖片，它并不能跟隨元素一起自動(dòng)縮放,。還需要添加background-size:cover,。使用這個(gè)屬性讓背景鋪滿元素的缺點(diǎn)是IE8及以下瀏覽器不支持，為了使IE下的效果可以接受,，可以使用background-position將背景圖片居中顯式,。我們必須要保證圖片的寬度至少要與元素的max-width一樣大。這樣的話元素的寬度永遠(yuǎn)不會(huì)比圖片大,，如果元素小于圖片時(shí),，圖片將被裁剪。 div.column {
/* The background image must be 800px wide */
max-width: 800px;
}
figure.fixedratio {
padding-top: 56.25%; /* 450px/800px = 0.5625 */
background-image: url(http:///img/sample.jpg);
background-size: cover;
background-position: center; /* Internet Explorer 7/8 */
}
流動(dòng)寬高比我們可以更深入一步,。假設(shè)我們有一張?jiān)谧烂鏋g覽器下顯式很好的寬屏圖片,，在移動(dòng)設(shè)備上我們不想使用相同的寬高比，要不然圖片會(huì)很小,。又或者是我們不想使用相同的高度,，因?yàn)閳D片可能會(huì)過高。
這個(gè)效果可以通過較少padding的百分比值和為元素設(shè)置一個(gè)高度來實(shí)現(xiàn)。假設(shè)我們的大圖是800*200px,，我們打算在元素的寬度減少到300px的時(shí)候,，背景圖片的高度為150px。現(xiàn)在我們計(jì)算下height和padding-top屬性值,。
上圖顯式了兩個(gè)尺寸的關(guān)系,。坡度線(slop)對(duì)應(yīng)于padding-top屬性，開始高度(start height)對(duì)應(yīng)于height屬性,，它表示元素在寬度為零時(shí)的高度,。調(diào)整樣式如下： div.column {
/* The background image must be 800px wide */
max-width: 800px;
}
figure.fluidratio {
padding-top: 10%; /* slope */
height: 120px; /* start height */
background-image: url(http:///img/sample.jpg);
background-size: cover;
background-position: center; /* Internet Explorer 7/8 */
}
REF: |
|
|
