标签中添加以下：
style="border-radius:50%overflow:hidden"
超过盒子了怎么办？
第一可以把图片的长宽按百分比写
height="50%"widtht="50%"
第二可以写一个高度固定值,我遇到的时候是用的第二种，大家要根据情况用。
height="70px"
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>景安</title>
</head>
<style type="text/css">
.head{width: 1000pxheight: 200pxmargin:0 auto}
.head-a{width: 30%height: 200pxbackground: bluefloat: left}
.head-b{width: 70%height: 200pxbackground: orangefloat: right}
</style>
<body>
<div class="head">
<div class="head-a"></div>
<div class="head-b"></div>
</div>
</body>
</html>
我们可以使用width：30%和width：70%这样的形式来设置百分比
这种情况应该只能结合js来调整了吧。分别获取左右两栏的高度，对比，得到最高的那栏，将低的一栏设定为高的那栏就好。
js：
var LH = document.getElementById( "left" ).offsetHeight
var RH = document.getElementById( "right" ).offsetHeight
if(LH >RH){
document.getElementById( "right" ).style.height = LH
} else{
document.getElementById( "left" ).style.height = RH
}
但是这个有个弊端，需提前知道各自是否设定了padding值，有设定的话，还得减去该值。
可以使用jq获取padding值的。
jq：
var lh = $("#left").height()//绝对高度，不包括padding-top和pm
var lhpt = $("#left").css('padding-top').replace("px", "")
var lhpm = $("#left").css('padding-bottom').replace("px", "")
var rh = $("#right").height()
var rhpt = $("#right").css('padding-top').replace("px", "")
var rhpm = $("#right").css('padding-bottom').replace("px", "")
var lh2 = lh + lhpt + lhpm
var rh2 = rh+rhpt + rhpm
if(lh2 >rh2){
$("#right").height(lh2 - rhpt - rhpm)
}else{
$("#left").height(rh2 - lhpt - lhpm)
}//就是得计算多个值来比较
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）