css 大图保持宽高比压缩,CSS实现自适应下保持宽高比

在项目中，我们可能经常使得自己设计的网页能自适应。特别是网站中的图片，经常要求在网页放大(或缩小)时，宽高同时放大(或缩小)，而且不变形(即保持正常的长宽比)。为了不变形，常用的方法就是设置width值，然后高度height设置auto。如果是div，我们该如何处理呢。

背景图片宽高比固定

下面，我仿照了移动端的聚划算网站中(https://ju.m.taobao.com/)中间一部分的布局。

高度自适应

*{

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){

ba