jQuery-图片预加载+等比例缩放+图片在容器中上下左右居中！

最新推荐文章于 2019-06-20 09:53:24 发布

luyang1016

最新推荐文章于 2019-06-20 09:53:24 发布

阅读量1.2w

点赞数 2

分类专栏： html5+jquery+css3 文章标签： function jquery div image

本文链接：https://blog.csdn.net/luyang1016/article/details/7212154

版权

html5+jquery+css3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

网站的图片，常常需要按照容器的大小进行等比例缩放（保证图片不失真），并同时让图片居中显示（左右居中，上下居中）。

实现的代码如下：

注意：需要自己下载一个 jquery的js。比如我有一个文件放在【./js/jquery-1.6.2.js】目录下面

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>按比例自动缩放图片</title>
    <script src="./js/jquery-1.6.2.js"></script>
    <script>
    /// <summary>
    /// 调整图片大小并居中
    /// </summary>
    /// <remarks>
    /// <param>图片对象</param>
    /// <param>容器最大宽度</param>
    /// <param>容器最大高度</param>
    /// </remarks>
    var adjustImgSize = function(img, boxWidth, boxHeight) {

        // var imgWidth=img.width();
        // var imgHeight=img.height();
        // 上面这种取得img的宽度和高度的做法有点儿bug 
        // src如果由两个大小不一样的图片相互替换时，上面的写法就有问题了，换过之后的图片的宽度和高度始终取得的还是换之前图片的值。
        // 解决方法：创建一个新的图片类，并将其src属性设上。
        var tempImg = new Image();        
        tempImg.src = img.attr('src');
        var imgWidth=tempImg.width;
        var imgHeight=tempImg.height;

        //比较imgBox的长宽比与img的长宽比大小
        if((boxWidth/boxHeight)>=(imgWidth/imgHeight))
        {
            //重新设置img的width和height
            img.width((boxHeight*imgWidth)/imgHeight);
            img.height(boxHeight);
            //让图片居中显示
            var margin=(boxWidth-img.width())/2;
            img.css("margin-left",margin);
        }
        else
        {
            //重新设置img的width和height
            img.width(boxWidth);
            img.height((boxWidth*imgHeight)/imgWidth);
            //让图片居中显示
            var margin=(boxHeight-img.height())/2;
            img.css("margin-top",margin);
        }
    };
    
    // 本机能的js事件
    $(function() {
         // 图像加载完成之后，调整图片大小
         $('#img1').load(function() {
             adjustImgSize($(this), $(this).parent().width(), $(this).parent().height());
         });
    });
    </script>
</head>

<body>
    <div id="imgBox" style="width:500px; height:200px; background:#cccccc">
        <img id="img1" alt="" src="./image/test.jpg" />
    </div>
</body>
</html>

缩放之后效果：（左右居中）

改变框体大小：

<div id="imgBox" style="width:200px; height:400px; background:#cccccc">

运行之后效果（上下居中）：

luyang1016

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
jQuery-图片预加载+等比例缩放+图片在容器中上下左右居中！

网站的图片，常常需要按照容器的大小进行等比例缩放（保证图片不失真），并同时让图片居中显示（左右居中，上下居中）。实现的代码如下：注意：需要自己下载一个 jquery的js。比如我有一个文件放在【./js/jquery-1.6.2.js】目录下面按比例自动缩放图片 /// /// 调整图片大
复制链接

扫一扫