zoukankan      html  css  js  c++  java
  • 让图片适应屏幕而不会失去长宽比

    设计思路:

      Image本身是有长宽的,拿到这个image之后我们先计算出这个比例,然后我们设定我们需要的宽度,计算出高度.

    实现代码:

      1.使用类名抓取要设置比例的图片,以便分类
      2.图片不要带高宽属性,不要写css设置高宽,以便获取本身的高宽
      3.函数要在onload之后执行,等待资源加载完才能获取

      <div>
            <img class="con-img" src="http://www.sn.xinhua.org/2006-12/06/xin_2812031114439212185110.jpg"/>
            <img class="con-img" src="http://www.sn.xinhua.org/2006-12/06/xin_2812031114439212185110.jpg"/>
            <img class="con-img" src="http://www.sn.xinhua.org/2006-12/06/xin_2812031114439212185110.jpg"/>
        </div>
        
        <script>
            var resetImg=function(){
                var img=document.getElementsByClassName("con-img"),
                        screenWidth=document.body.clientWidth,
                        widthArr=[screenWidth/2,screenWidth/3,100];
                for(var i=0, l= img.length; i<l ; i++){
                    var ratio=img[i].height/img[i].width;
                    var height=widthArr[i]*ratio;
                    img[i].width=widthArr[i];
                    img[i].height=height;
                }
            };
            window.onload=resetImg;
            window.onresize=resetImg;
        </script>
  • 相关阅读:
    hbase shell-namespace(命名空间指令)
    hbase shell-general(常规指令)
    hbase shell概述
    Codeforces Round #412 div2 ABCD
    Educational Codeforces Round 19
    CSU 1786 莫队+KDTree
    cdq分治入门and持续学习orz
    VK Cup 2017
    HRBUST 2072 树上求最大异或路径值
    UvaLive 5811 概率DP
  • 原文地址:https://www.cnblogs.com/x-radish/p/3237808.html
Copyright © 2011-2022 走看看