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

作者:admin   时间:2020-07-09   访问量:1

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

  首页我使用了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/34.html转载请注明出处


相关文章
帝国CMS用tag调用相关文章的方法

函数说明:user_OtherLink(调用条数,指定栏目id,指定模型id) ;相关文章模板采用的是公共模板里的相关信息模板。

一分钟看懂对象存储和CDN之间的关系

我们通常会将对象存储与CDN配合使用,为什么对象存储要和CDN配合使用呢,cdn和对象存储有什么关系?

配置https后,完美解决百度分享(share)失效

我的一个企业站申请免费的SSL证书做了Https配置之后,我发现百度分享失效了,不能正常显示和分享了。这边就分享下如何解决百度分享不支持https的方法:

网站打开速度慢这几个方法有效学会可提升网站排名!

网站的打开速度一直是许多站长非常关心的问题,他直接影响着网站的跳出率、访问率、点击率,据统计访客平均访问网站所等待的时间为5秒左右,这就意味着如果访客点击访问你的网站如果5秒内还未打开那么你就有可能失去一位访客

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