css等比例缩放

例子一、

　　html代码

1 <div class="box">
2             <div class="inner">
3                 <span>padding-bottompadding-bottompaddinadding-bottompadding-bottompaddinadding-bottompadding-bottompaddin</span>
4             </div>
5         </div>

　　css代码

 1             .box {
 2                 width: 100px;
 3                 height: 10px;
 4                 border: 1px solid blue;
 5             
 6             }
 7             .inner {
 8                 /* padding-top: 100%; */
 9                 overflow: hidden;
10                 border: 1px solid red;
11                 /* 为下面内容的绝对定位做准备 */
12                 position: relative;
13             }
14             /* 使用伪元素给 .inner添加一个子级，用来撑开父元素的高度，这样内容就会是100px，
15              如果把padding-top放在父元素中，那么父元素会加上border的值，用子元素（内容，不加border）撑起来的高度纯粹一点，*/
16             .inner::after {
17                 content: '';
18                 display: block;
19                 padding-top: 100%;
20             }
21             .inner span {
22                 position: absolute;
23                 left: 0;
24                 top: 0;
25             }

　　例子二

　　html

1 <div class="box">
2             <div class="inner">
3                 <a href=""><img src="image/xigua.jpg" ></a>
4                 <a href=""><img src="image/xigua.jpg" ></a>
5                 <a href=""><img src="image/xigua.jpg" ></a>
6             </div>
7         </div>

css

 1             .box {
 2                 width: 33.33%;
 3                 height: 3px;
 4                 border: 1px solid red;
 5             }
 6             .inner a {
 7                 /* 为包含的图片设置绝对定位做准备 */
 8                 position: relative;
 9                 float: left;
10                 /* 宽度等于总宽度的33.33% - 根em（默认16px） */
11                 width: calc(33.33% - 1.6rem);
12                 margin: 1.2rem  0 0 1.2rem;
13                 /* 设置连接a的外边线 */
14                 outline: 1px solid #dedede;
15             }
16             /* 用来撑起父元素，a的高度 如果给a设置padding-top ，那么高度就会是inner继承的父元素的宽度*/
17             .inner a::before {
18                 content: '';
19                 display: block;
20                 padding-top: 100%;
21             }
22             .inner a img {
23                 position: absolute;
24                 left: 0;
25                 top: 0;
26                 width: 100%;
27                 height: 100%;
28             }

例子二更简单的一种方法

 1             .box {
 2                 /* 屏幕宽度的33.33% */
 3                 width: 33.33%;
 4                 height: 3px;
 5                 border: 1px solid blue;
 6             }
 7             .inner a {
 8                 float: left;
 9                 /* 屏幕宽度33.33后再取33.33% */
10                 width: calc(33.33% - 1.62rem);
11                 /* vw单位是相对于视口（屏幕）宽度的 */
12                 height: calc(33.33vw/3 - 1.6rem);
13                 margin: 1.2rem 0 0 1.2rem;
14                 outline: 1px solid #dedede;
15             }
16             .inner a img {
17                 display: block;
18                 width: 100%;
19                 height: 100%;
20             }