在项目中,我们可能经常使得自己设计的网页能自适应。特别是网站中的图片,经常要求在网页放大(或缩小)时,宽高同时放大(或缩小),而且不变形(即保持正常的长宽比)。为了不变形,常用的方法就是设置width值,然后高度height设置auto。如果是div,我们该如何处理呢。
背景图片宽高比固定
下面,我仿照了移动端的聚划算网站中(https://ju.m.taobao.com/)中间一部分的布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高度自适应</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100%;
background-color: pink;
position: relative;
}
div:after{display:block;content: "";visibility: hidden;clear: both;}
div p{
float: left;
width: 30%;
padding-top: 35%;
margin-left: 3%;
border:1px black solid;
border-radius: 10px;
box-sizing: border-box;
}
div p:nth-child(1){
background: url(images/banner1.jpg) no-repeat;
background-size: cover;
}
div p:nth-child(2){
background: url(images/banner2.jpg) no-repeat;
background-size: cover;
}
div p:nth-child(3){
background: url(images/banner3.jpg) no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
效果如下:
图中三个DIV的宽高都会随着页面的大小保持原有比例放大或缩小。其核心思想就是利用padding来拓宽盒子高度。通过padding-top来设置百分比,使其百分比与宽度的百分比为需要的比例。这里需要注意的是:padding-top中设置的百分比与width中设置的百分比都是以父元素的width为参考的。
div宽高比固定
由于背景图片能覆盖包括padding在内的空间,但是如果需要在子元素中放置其他内容,会扩大子元素的高度,这时应该如何处理呢。为了让其不占用文档流空间,可设置其position:absolute;具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高度自适应</title>
<style>
*{
margin: 0;
padding: 0;
}
.main{
width: 100%;
background-color: pink;
position: relative;
}
.main:after{display:block;content: "";visibility: hidden;clear: both;}
.main div{
float: left;
width: 30%;
position: relative;
padding-top: 35%;
margin-left: 3%;
border:1px black solid;
border-radius: 10px;
box-sizing: border-box;
}
.main div:nth-child(1){
background: url(images/banner1.jpg) no-repeat;
background-size: cover;
}
.main div:nth-child(2){
background: url(images/banner2.jpg) no-repeat;
background-size: cover;
}
.main div:nth-child(3){
background: url(images/banner3.jpg) no-repeat;
background-size: cover;
}
.p1{
position: absolute;
height: 100%;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: red;
overflow: hidden;
}
</style>
</head>
<body>
<div class="main">
<div><p class="p1">图中三个DIV的宽高都会随着页面的大小保持原有比例放大或缩小。其核心思想就是利用padding来拓宽盒子高度。通过padding-top来设置百分比,使其百分比与宽度的百分比为需要的比例。这里需要注意的是:padding-top中设置的百分比与width中设置的百分比都是以父元素的width为参考的</p></div>
<div></div>
<div></div>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
效果如下:
为了能清楚的展示,我们把第一个div中的P元素背景色标记为红色,我们可以看到P元素的大小也能随着div的大小变化而变化。
jquery实现宽高比固定
上面两个方法都是纯css方法实现的,如果借用JS(或jquery)来实现的话,可以随意设置div的宽高,下面介绍一下利用jquery来实现。首先我们设置div的宽度为百分比,然后通过jquery来设置高度值。当然,为了能使得div的高度能随着页面的大小变化而变化,还需要绑定一个resize事件。完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高度自适应3</title>
<style>
*{
margin: 0;
padding: 0;
}
.main{
width: 100%;
background-color: pink;
position: relative;
}
.main:after{display:block;content: "";visibility: hidden;clear: both;}
.main div:nth-child(1){
float: left;
width: 30%;
position: relative;
margin-left: 3%;
border:1px black solid;
border-radius: 10px;
box-sizing: border-box;
background: url(images/banner1.jpg) no-repeat;
background-size: cover;
}
.main div:nth-child(2){
float: left;
width: 30%;
position: relative;
padding-top: 35%;
margin-left: 3%;
border:1px black solid;
border-radius: 10px;
box-sizing: border-box;
background: url(images/banner2.jpg) no-repeat;
background-size: cover;
}
.main div:nth-child(3){
float: left;
width: 30%;
position: relative;
padding-top: 35%;
margin-left: 3%;
border:1px black solid;
border-radius: 10px;
box-sizing: border-box;
background: url(images/banner3.jpg) no-repeat;
background-size: cover;
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// 封装函数
function setRatio(obj, ratio){
var that = obj;
var h = that.outerWidth()*(1/ratio);
var borderWid = parseInt(that.css("border-top-width"))+parseInt(that.css("border-bottom-width")); // 考虑边框的宽度
that.css("height",h+borderWid);
}
var obj = $('.main div').eq(0);
var ratio = 6/7;
setRatio(obj,ratio);
$(window).resize(function(){
setRatio(obj,ratio);
});
});
</script>
</head>
<body>
<div class="main">
<div><p class="p1">图中三个DIV的宽高都会随着页面的大小保持原有比例放大或缩小。其核心思想就是利用padding来拓宽盒子高度。通过padding-top来设置百分比,使其百分比与宽度的百分比为需要的比例。这里需要注意的是:padding-top中设置的百分比与width中设置的百分比都是以父元素的width为参考的</p></div>
<div></div>
<div></div>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
上述代码中,为了达到一开始的比例效果(一开始的效果是width:padding-top=30%:35%),我们加上了边框的宽度。主要思想就是先获取元素的宽度,然后再根据宽高比例计算并设置高度值,为了能随着页面变化,在resize事件中调用设置函数。元素的就能保证宽高比不变,并能随着页面变化自适应变化。