图片等比例缩放后放入容器

最新推荐文章于 2021-01-13 02:02:28 发布

hjl845621

最新推荐文章于 2021-01-13 02:02:28 发布

阅读量642

点赞数

分类专栏： js 文章标签： image javascript url include null function

本文链接：https://blog.csdn.net/hjl845621/article/details/7353927

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

此实例解决容器大小固定，而图片大小不固定，使图片完全包含于容器的问题。通过javascript的OriginImage 类获取图片实际大小，然后设置image样式实现。上代码：

include jquery.js；

this.bigPicArea = $("#focusImg");

this.bigImgObj = this.bigPicArea.find("img");
         if (this.bigImgObj != null && picarea!=null) {            
            var OriginImage = new Image();
            var url = this.bigImgObj.attr("src");
            if (OriginImage.src != url) OriginImage.src = url;
            this.ZoomImageByArea({ width: OriginImage.width, height: OriginImage.height }, { width: this.bigPicArea.width(), height: this.bigPicArea.height() }, this.bigImgObj[0]);
        }

 ZoomImageByArea: function (picwNh, divwNh, picObj) {
        var scale = 1;
        if ((picwNh.width / divwNh.width) >= (picwNh.height / divwNh.height)) {
            scale = picwNh.width / divwNh.width;
            $(picObj).attr("width", divwNh.width);
            $(picObj).attr("height", picwNh.height / scale);
        } else {
            scale = picwNh.height / divwNh.height;
            $(picObj).attr("width", picwNh.width / scale);
            $(picObj).attr("height", divwNh.height);
        }
    }