html根据宽的百分比设置高

最新推荐文章于 2023-01-04 13:59:49 发布

佳慧-陈

最新推荐文章于 2023-01-04 13:59:49 发布

阅读量7.2k

点赞数 2

分类专栏： bootstrap easyui framework7 文章标签： html 宽高动态百分比

本文链接：https://blog.csdn.net/i_chenjiahui/article/details/49180767

版权

easyui 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

bootstrap

3 篇文章 0 订阅

订阅专栏

framework7

3 篇文章 0 订阅

订阅专栏

最近在团队中开发了一部分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撑到指定百分比的高度。

佳慧-陈

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
html根据宽的百分比设置高

最近在团队中开发了一部分html页面有一个功能点，需要在一行展示三张图片，每张图片拉伸成正方形。对于图片的宽设置为33%就可以了，但是怎么让高度根据宽度变化呢？最初想到的是在页面生成后使用js来获取图片宽，再根据这个获取的宽设置图片的高。代码如下：$(function(){ var imgs=$('.view_img') for(var i=0;i<imgs.length;
复制链接

扫一扫