CSS实现自适应下保持宽高比

在项目中，我们可能经常使得自己设计的网页能自适应。特别是网站中的图片，经常要求在网页放大（或缩小）时，宽高同时放大（或缩小），而且不变形（即保持正常的长宽比）。为了不变形，常用的方法就是设置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>

效果如下：

图中三个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>

效果如下：

为了能清楚的展示，我们把第一个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>

上述代码中，为了达到一开始的比例效果（一开始的效果是width：padding-top=30%：35%），我们加上了边框的宽度。主要思想就是先获取元素的宽度，然后再根据宽高比例计算并设置高度值，为了能随着页面变化，在resize事件中调用设置函数。元素的就能保证宽高比不变，并能随着页面变化自适应变化。