zoukankan      html  css  js  c++  java
  • 图片固定在图片框内,大小自动适应,宽高避免拉伸

    在展示图片列表时,为了看上去整齐,且图片又不会拉伸,宽高按照比例展示在列表中或图片框内。

    js方法如下,

     <script type="text/javascript">
    
            //ImgD:要放图片的img元素,onload时传参可用this
    
            //h:img元素的高度,像素
    
            //w:img元素的宽度,像素
            function autosize(ImgD, h, w) {
                var image = new Image();
                image.src = ImgD.src;
                if (image.width < w && image.height < h) {
                    ImgD.width = image.width;
                    ImgD.height = image.height;
                }
                else {
                    if (w / h <= image.width / image.height) {
                        ImgD.width = w;
                        ImgD.height = w * (image.height / image.width);
                    }
                    else {
                        ImgD.width = h * (image.width / image.height);
                        ImgD.height = h;
                    }
                }
    
            }
        </script>
     

    图片上的相应代码 

    <img src=“img/bubufx.jpg”  border="0" onload="autosize(this,180,180);" />



  • 相关阅读:
    学习进度表
    第十三周
    硅谷之谜
    第12周
    我的成就故事
    学习进度表
    第8周总结
    测试作业
    第六周周总结
    问卷调查
  • 原文地址:https://www.cnblogs.com/weekzero/p/3039594.html
Copyright © 2011-2022 走看看