做移动端适配的时候常常会遇到盒子模型等比缩放的问题,等比缩放会遇到两种类型,第一种是图片类型,第二种是div类型,下面分别做讨论。

图片的等比缩放

这个不过多的讲解,因为我们经常会遇到这样的问题。当我们设置图片的宽度百分比时,图片高度会自动等比缩放。下面是一个Demo:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>等比缩放</title>
  6.     <style>
  7.         body{
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  11.         img{
  12.             width: 50%;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <img src="meizi.jpg" alt=""/>
  18. </body>
  19. </html>

图片会相对于包含块元素(包含块是很重要的概念,前面的博文有讲解,请自行查看)等比缩放:Demo

缩放原理

img属于replaced元素,换句话说就是img宽高不是由CSS控制的,而是由src资源决定的,src有它自己的宽高。当为其设定宽度的时,高度会按照原有的比例重新计算,因此img的会按照固定的比例缩放。

Div的等比缩放

Div元素不是replaced元素,当设定宽度时,高度是不变的,下面用一个hack技巧实现div的等比缩放:Demo:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>等比缩放</title>
  6.     <style>
  7.         body{
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  11.         ul,li{
  12.             padding: 0;
  13.             margin: 0;
  14.         }
  15.         ul{
  16.             background: #d6caca;
  17.             width: 100%;
  18.             list-style: none;
  19.         }
  20.         li{
  21.             width:25%;
  22.             margin: 10px 2%;
  23.             background: #dbe0e4;
  24.             float: left;
  25.             height: 0;
  26.             padding-bottom: 25%;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.     <ul>
  32.         <li>123</li>
  33.         <li>123</li>
  34.         <li>123</li>
  35.         <li>123</li>
  36.         <li>123</li>
  37.         <li>123</li>
  38.     </ul>
  39. </body>
  40. </html>

Demo

suofang

原理与重点

其实代码很简单,最主要的两段是:height:0;padding-bottom:25%。我们知道height的百分比是相对于包含块的高度,但是padding-bottom/top和margin-bottom/top是相对于包含块的宽度,因此我们可以通过设置padding-bottom的百分比控制其与包含块宽度的比例,而div的宽度也是相对包含块宽度,所以div宽度与padding-bottom有了相同的参照物,他们两个就可以实现等比例缩放了,注意这里不是宽度与高度的等比例缩放。

Height为0时,div中的内容就挤到了padding-bottom中了,因此不会影响内容的显示。我们还可以设定overflow:hidden,因为hidden隐藏的是padding以外的内容。