響應式,圖片與其他元素一同等比縮放
阿新 • • 發佈:2019-01-24
今天學做響應式,發現個問題:
如何讓其他元素也像圖片一樣等比例的縮放
如圖,
<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;
}