怎么样使图片高度与宽度成比例自适应

一.前言

将高度设置成百分比时，其高度是基于父元素来定的，设置成50%，就是将该元素高度设置成 父元素的高度值 x 50%。

但是将高度设置成百分比时，往往是不生效的！高度依然为0，这是为啥? 道理很简单，那就是父元素的高度也为0。

所以这就需要讲到浏览器对宽度及高度是如何计算的。

浏览器在计算有效宽度时会考虑浏览器窗口的宽度，如果没有设置绝对宽度，就会自动将页面内容横向平铺填满整个窗口。

然而浏览器并不计算内容的高度，除非内容超过了视窗高度，形成滚动条。

或者给页面设置一个绝对高度，不然的话，浏览器就会将内容按文档流往下堆砌，也就是高度值为缺省值 auto。

所以如果基于缺省值 auto 来设置百分比高度的话，必定是无效高度。

显然只需要给父元素指定一个绝对高度，就没什么问题了。

可是在实际应用当中，高度通常都不是固定的，不会把高度写死，何解？

这就可以用到，本文给大家介绍的方法，接着往下看。。。

二.使用css 巧用padding代替高度

为什么使用内边距代替高度？

内边距，顾名思义就是元素边框与元素内容之间的空白区域。

所以内边距越来越大时，元素的高度也会不断增大。

设想一下，如果一个元素的内容为空，内边距的高度，是不是就是该元素的高度呢？

答案是必须的！

那么我们是不是可以，将高度替换为内边距，并且以百分比设置它的值呢？

答案也是必须的！

这里可能有些朋友会有疑问了，如果设置成百分比的话，一样是基于父元素成百分比的呀？

对，没错，是基于父元素，但是 内边距 padding 是基于父元素的宽度的百分比的内边距

注意重点是 基于宽度 ！

所以不管是 padding-left 和 padding-right 还是 padding-top 和 padding-bottom 都是基于父元素宽度的百分比。

理论说完，咱们就来实践一下

HTML

<div class="autoHeightDiv"></div>

CSS

.autoHeightDiv {
    width: 50%;
    height: 0;
    padding-top: 50%;
    background-image: url(4.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

当然使用 padding-top 和 padding-bottom 都是，一样可以实现，一样的效果。

三.使用js $(window).resize（）

HTML

<ele></ele>

CSS

ele{

width：50%

}

JQUERY

function changesize(ele){
     var width=$(ele).width();        //初始设置图片长宽成比例1:1
     $(ele).css("height",width);

     $(window).resize(function(){//当浏览器大小发生改变时，实时控制高度=宽度
          var width=$(ele).width();
          $(ele).css("height",width);
          if(callback) callback($(this).width());
      })

}