【转载】CSS实现自适应下保持宽高比
2018-05-30 本文已影响13人
积_渐
在项目中，我们可能经常使得自己设计的网页能自适应。特别是网站中的图片，经常要求在网页放大（或缩小）时，宽高同时放大（或缩小），而且不变形（即保持正常的长宽比）。为了不变形，常用的方法就是设置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>
