响应式，图片与其他元素一同等比缩放

今天学做响应式，发现个问题：

  如何让其他元素也像图片一样等比例的缩放

如图，

        <div class="box clearfix">        <img src="images/pc_rec.png" class="img"><div class="box2"><p>啦啦啦我是文字</p><img src="images/mobile1.jpg" class="img2"></div></div>

  box的高度自适应确定，box宽度为百分比，左侧图片宽度给的百分比，左浮动，右边盒子的宽度给的百分比，右浮动，我想让这个结构能够在屏幕尺寸变化的时候保持比例不变，

  可是每当屏幕缩小的时候右侧的盒子的高度就会变小的比较慢，导致右侧的图片下面多出来，屏幕变大的时候，右侧的盒子就会变大的比较慢而缩进去；

  想了想应该是因为屏幕变化的时候两张图片都在等比例的缩放，而右侧的p标签的高度却是一直不变的，才导致了这种问题；

 要解决的话就要使p标签的高度也得等比缩放；
 尝试一：给p标签的高度直接设置百分比，没有成功。由于要实现整个结构随屏幕尺寸等比变化，父元素的高度就没法设置，只能凭借图片的变化去适应。父元素的高度只能由子元素撑起来。·给p标签的高度设置百分比，百分比是以父元素高的为基准的，而此时父元素的高度还需要p标签的高度和右图的高度都确定后才能确定，所以此时取不到值；

 尝试二：由上可知：p的高度是 因，父元素的高度是 果，要想给p设置百分比，就先得破除这种因果关系:

                于是给p设置absolute，box2设置relative；这样box2的高度就不再由p决定了；

                 为了不让结构破坏，给img2设置与margin-top来顶起p原来的位置；

                 这样box2的高度就由img2的高度和iimg2的·margin-top来共同决定了

                 img2的高度不用管，会随着它自身的宽度按比例变化。和img2的margin-top则可以把值改为百分比，这个百分比的基准恰好又是父元素box2的宽度。

                这样box2的高度就会随着box2宽度就等比缩放了；

                而此时p标签的高度不再决定着box2的高度。所以给p设置百分比就可以取到值了;

.box{ background: #ccc; border: 1px solid #0a0; width:100%;     }.img{float: left;                        width: 45%;border:1px solid red;}.box2{position: relative;float: right;width: 52%;                        border: 1px solid red;     }       .img2 {         width: 100%;         margin-top:12.525%;     }         p  {  position: absolute;                       left: 0;                top: 0;                height: 16.014%;                font-size:16px;                    }

 clearfix:after{content: "";display: block;                clear: both;               }         .clearfix{         *zoom:1;         }