html页⾯百分⽐⼤下,html根据宽的百分⽐设置⾼
最近在团队中开发了⼀部分html页⾯
有⼀个功能点，需要在⼀⾏展⽰三张图⽚，每张图⽚拉伸成正⽅形。
对于图⽚的宽设置为33%就可以了，但是怎么让⾼度根据宽度变化呢？最初想到的是在页⾯⽣成后使⽤js来获取图⽚宽，再根据这个获取的宽设置图⽚的⾼。
代码如下：
$(function(){
var imgs=$('.view_img')
for(var i=0;i
imgs[i].style.height=imgs[i].offsetWidth+'px';
}
})
在⼿机web中，不拉伸页⾯⼤⼩其实这样做是可以了的。
但是如果在pc段的页⾯中查看，拉伸下页⾯，图⽚的⾼度是不会跟着宽度变化的。
查看了点资料，原来直接使⽤css样式也是可以做到宽按⽗组件的百分⽐设置，⾼根据宽的百分⽐设置的。
代码如下：margin属性值可以为百分比
根据宽的百分⽐设置⾼
/*关键样式*/
.container{
width:20%;
position:relative;
display: inline-block;
}
.scale_100{
margin-top: 100%;#取巧⽤这个来调整container的⾼，将container撑⾼
}
.scale_75{
margin-top: 75%;#取巧⽤这个来调整container的⾼，将container撑⾼
}
.content{
position:absolute;
top:0;
right:0;
bottom:0;
left:0; border:solid;
border-color:red;
margin:5px;
}
/*⽆关样式*/
.split_line{
border:dotted;
border-color:green;
margin:5px
}
根据宽的百分⽐设置⾼

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。