如何讓其他元素也像圖片一樣等比例的縮放

如圖，

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

  可是每當螢幕縮小的時候右側的盒子的高度就會變小的比較慢，導致右側的圖片下面多出來，螢幕變大的時候，右側的盒子就會變大的比較慢而縮排去；

  想了想應該是因為螢幕變化的時候兩張圖片都在等比例的縮放，而右側的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;
         }