移動端-圖片及背景圖的縮放

作了一組移動端的頁面，在佈局時遇到了一些問題，總結下以免再次掉坑。

遇到的問題：

1.圖片及帶背景圖片的塊寬高等比縮放佈局

2.margin,padding百分比佈局

圖片及帶有背景圖片的塊的圖片寬高等比縮放

純圖片可使用img標籤，將其寬度設置成百分比，高度會自動按比例縮放。控制起來很方便。

帶背景圖片的div就有點麻煩了，寬度可使用百分比，但高度若是不設置具體像素數，會按照內容大小自動佈局，這個問題處理起來有點點小麻煩。

解決方案是使用百分比padding將塊支撐起來，但具體的百分比padding如何計算。

margin,padding百分比佈局

這個主題其實就一個關鍵問題：margin,padding的百分比是按照誰的百分比計算的。

規範中註明了margin的百分比值參照其包含塊的寬度進行計算。固然，這隻發生在writing-mode: horizontal-tb和direction:ltr的狀況下。書寫模式是縱向的狀況下，它會按照塊的高度來計算。

padding取值百分比來作：垂直方向的padding取值使用百分比時，其值是相對於本模塊的寬度（怪異模式盒子模型）

再回頭想一想，爲何margin:auto;不能在垂直方向上居中？其實緣由也是上面所說的，由於縱向是能夠無限延展的，因此沒有一個必定的值能夠被參照被用來計算。

實現響應式背景圖片

處理響應式佈局中背景圖片的簡單方法是等比例縮放背景圖片。咱們知道寬度設爲百分比的 元素，其高度會隨着寬度的變化自動調整，且其寬高比不變。若是想在背景圖片中實現一樣的效果，咱們必須先解決如何保持HTML元素的寬高比。

固定寬高比

咱們將用到一個保持元素寬高比的技巧：爲元素添加垂直方向的padding值，padding值使用百分比。這是由於垂直方向的padding取值使用百分比時，其值是相對於包含塊的寬度而定的

假設咱們有一張800*450px的圖片，咱們須要建立一個元素在其寬度變化時，它的寬高比仍保持16:9。代碼以下：

<div class="column">
  <div class="figure"></div>
</div>
.column{
  max-width: 800px;
}
.figure{
  padding-top: 56.25%;  /* 450px/800px = 0.5625 */
}
複製代碼

本身動手試試吧

背景圖片自適應

上面咱們實現了元素縮放並保持寬高比。可是此時若是咱們添加了背景圖片，它並不能跟隨元素一塊兒自動縮放。還須要添加background-size:cover。使用這個屬性讓背景鋪滿元素的缺點是IE8及如下瀏覽器不支持，爲了使IE下的效果能夠接受，可使用background-position將背景圖片居中顯式。咱們必需要保證圖片的寬度至少要與元素的max-width同樣大。這樣的話元素的寬度永遠不會比圖片大，若是元素小於圖片時，圖片將被裁剪。

<div class="column">
  <div class="figure"></div>
</div>
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://domain.com/img/sample.jpg);
  background-size: cover;
  background-position: center;  /* Internet Explorer 7/8 */
}
複製代碼

再動手試試吧

流動寬高比

咱們能夠更深刻一步。假設咱們有一張在桌面瀏覽器下顯式很好的寬屏圖片，在移動設備上咱們不想使用相同的寬高比，要否則圖片會很小。又或者是咱們不想使用相同的高度，由於圖片可能會太高。

這個效果能夠經過較少padding的百分比值和爲元素設置一個高度來實現。假設咱們的大圖是800*200px，咱們打算在元素的寬度減小到300px的時候，背景圖片的高度爲150px。如今咱們計算下height和padding-top屬性值。

上圖顯式了兩個尺寸的關係。坡度線(slop)對應於padding-top屬性，開始高度(start height)對應於height屬性，它表示元素在寬度爲零時的高度。調整樣式以下：

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://domain.com/img/sample.jpg);
  background-size: cover;
  background-position: center;  /* Internet Explorer 7/8 */
}
複製代碼

圖片
若是不爲img指定寬高，默認狀況下，img的寬高會是圖像的原始尺寸。所以相對其父容器可能溢出，也可能不滿。也不會跟着父容器的百分比發生變化。爲了能讓img跟着父容器的寬度而變化，咱們經常給它設置以下樣式：

img {    width: 100%;    height: auto;
}
複製代碼

如上設置，img的高度會自動保持比例。所以咱們通常不指定img外層容器的高度，而是讓其內部的img自動撐開。此外還有一種頗有用的樣式：

img {    max-width: 100%;    height: auto;
}
複製代碼

注意，上面的代碼咱們並無指定width，而是指定了max-width:100%。這樣的話，圖片的最大寬度不會超過其原始寬度，而圖片在小於原始寬度的狀況下會按width: 100%的樣子顯示。 本篇博客的配圖就是用了這樣的樣式。

對於img元素，還有個3像素「bug」，默認狀況下圖片下方會多出3px的邊距，能夠經過爲img指定vertical-align的任意值或者是display:block來消除這3px，而通常使用vertical-align: middle不會破壞img默認是行內塊的樣式。

父元素要設置width，如：width:50%；