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


    一.前言

    将高度设置成百分比时,其高度是基于父元素来定的,设置成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 {
         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());
          })

    }

  • 相关阅读:
    遇到shell重定向的一个奇怪问题:'消失'的标准输入!
    步步深入:MySQL架构总览->查询执行流程->SQL解析顺序
    [来自妹纸的挑战]-展开/还原多层链表
    【Shell】Linux 一行 多命令
    【Shell】通配符与特殊符号
    【Shell】变量的取用、删除、取代与替换
    【LeetCode】Find Minimum in Rotated Sorted Array 在旋转数组中找最小数
    【LeetCode】Maximum Product Subarray 求连续子数组使其乘积最大
    【LeetCode】Reverse Words in a String 反转字符串中的单词
    【面试题】比给定数大的最小数
  • 原文地址:https://www.cnblogs.com/coderL/p/7481584.html
一二三 - 开发者的网上家园