固定图片宽高比的最佳方法,用效果说话!

时间:2019-12-30   访问量:33

  大树写文章的时候,很多图片都是从网上找的,也没有用ps进行处理,那这样的结果就是列表页的图片大小不一,严重的影响了网站的美观。那么有没有办法可以解决呢,请听大树细细道来。

图片宽高比.png

  首页我使用了JS来固定图片宽高的比例(代码如下)

  function imgHeight(){
      var aImg=document.getElementsByClassName('list-img');
      for(var i=0;i
          if(aImg[i].width>0){aImg[i].height=aImg[i].width*0.618;}
          }
      }

  用JS来实现图片的宽高比,有一个前提就是网页必须要加载完全,如果没有加载完,图片的width就是个0,那图片的height自然也就是0了,所以你会发现,图片居然不见了。

  为了能够等到网页完全加载后,再运行JS,大树查了资料,发现直接在body上写 onload="imgHeight();"是最保险的做法。

  JS确实可以实现我想要的效果,但有些强迫的我,发现用鼠标拖动浏览器大小时,图片的大小却始终没有变化,并需要刷新页面才能看到图片大小的改变。这个时候,我才理解到这段JS是网页加载的时候运行有效,一旦没有加载,自然就不行了。

  好吧,为了能够达到我内心的完美,我开始从css入手,找到了padding固定宽高比的方法。

  实现图片固定宽高比缩放我们采用padding-top/padding-bottom来实现,padding-top/padding-bottom取值百分比是相对于包含块的宽度而定。有了这个,事情就好办了,请看代码:     

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>padding demo</title>
        <style type="text/css" charset="utf-8">
            .contain {
                position: relative;
                width: 100%;
                background-color: black;
            }
            .box {
                width: 100%;
                padding-bottom: 56.25%;
                background-color: white;
            }
            .content {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: hsla(120, 50%, 50%, .5);
            }
        </style>
    </head>
    <body>
        <div class="container">
        <div class="box">
           <div class="content"></div>
        </div>
        </div>
    </body>
    </html>

  现在,大树SEO博客,随便怎么拖拽改变浏览器大小,图片的比例始终保持不变,整个网站立刻整齐美观起来。


【地址】:http://www.inseo.cn/seo/57.html转载请注明出处


相关文章


Copyright © 2018-2020 大树SEO All Rights Reserved.