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

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

遇到的问题：

1.图片及带背景图片的块宽高等比缩放布局

2.margin,padding百分比布局

图片及带有背景图片的块的图片宽高等比缩放

纯图片可以使用img标签，将其宽度设置成百分比，高度会自动按比例缩放。控制起来很方便。

带背景图片的div就有点麻烦了，宽度可以使用百分比，但高度如果不设置具体像素数，会按照内容大小自动布局，这个问题处理起来有点点小麻烦。

解决方案是使用百分比padding将块支撑起来，但具体的百分比padding如何计算。

margin,padding百分比布局

这个主题其实就一个关键问题：margin,padding的百分比是按照谁的百分比计算的。

规范中注明了margin的百分比值参照其包含块的宽度进行计算。当然，这只发生在writing-mode: horizontal-tb和direction:ltr的情况下。书写模式是纵向的情况下，它会按照块的高度来计算。

padding取值百分比来做：垂直方向的padding取值使用百分比时，其值是相对于本模块的宽度（怪异模式盒子模型）
 

再回头想想，为什么margin:auto;不能在垂直方向上居中？其实原因也是上