移动端-图片及背景图的缩放

作了一组移动端的页面，在布局时遇到了一些问题，总结下以免再次掉坑。

遇到的问题：

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%；