您的位置：首页 > Web前端 > HTML

html根据宽的百分比设置高

2015-10-16 16:55 483 查看

最近在团队中开发了一部分html页面

有一个功能点，需要在一行展示三张图片，每张图片拉伸成正方形。

对于图片的宽设置为33%就可以了，但是怎么让高度根据宽度变化呢？最初想到的是在页面生成后使用js来获取图片宽，再根据这个获取的宽设置图片的高。

代码如下：

$(function(){
var imgs=$('.view_img')
for(var i=0;i<imgs.length;i++){
imgs[i].style.height=imgs[i].offsetWidth+'px';
}
})

在手机web中，不拉伸页面大小其实这样做是可以了的。

但是如果在pc段的页面中查看，拉伸下页面，图片的高度是不会跟着宽度变化的。

查看了点资料，原来直接使用css样式也是可以做到宽按父组件的百分比设置，高根据宽的百分比设置的。

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>根据宽的百分比设置高</title>
</head>
<style>
/*关键样式*/
.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
}

</style>
<body>

<h2>根据宽的百分比设置高</h2>
<div class="split_line"></div>
<div class='container'>
<div class='scale_100'></div>
<img style="width:100%; height:100%;position:absolute; left:0; top:0;" src="http://www.xxjxsj.cn/article/UploadPic/2009-10/2009101018545196251.jpg"></img>
</div>
<div class="split_line"></div>
<div>
<div class='container'>
<div class='scale_75'></div>
<div class='content'>
<img  style="width:100%; height:100%;" src="http://news.51sheyuan.com/uploads/allimg/111001/133442IB-2.jpg"></img>
</div>
</div>
<div class='container'>
<div class='scale_75'></div>
<div class='content'><img  style="width:100%; height:100%;" src="http://news.51sheyuan.com/uploads/allimg/111001/133442IB-2.jpg"></img></div>
</div>
</div>
</body>
</html>

主要是利用margin-top的百分比是根据父组件的宽来计算的，这一原理。

然后取巧利用margin-top将div撑到指定百分比的高度。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html 宽高动态百分比

相关文章推荐

新的分享

章节导航