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

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

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

如图，

        <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;
         }