使用JavaScript解决网页图片拉伸问题

转载请注明出处：http://blog.csdn.net/xiaojimanman/article/details/53084716

http://www.llwjy.com/blogdetail/92b85d1cdb0343a7bd6d8dd0868c0f82.html

个人博客站已经上线了，网址 www.llwjy.com ~欢迎各位吐槽~

-------------------------------------------------------------------------------------------------

在开始之前先打一个小小的广告，自己创建一个QQ群：321903218，点击链接加入群【Lucene案例开发】，主要用于交流如何使用Lucene来创建站内搜索后台，同时还会不定期的在群内开相关的公开课，感兴趣的童鞋可以加入交流。

问题描述

这段时间在做PM的需求的时候突然发现一个问题，产品上的图片来自多个第三方，具体的尺寸无法确定，如果直接在样式中写死图片的尺寸大小就会出现图片拉伸的现象，十分影响产品的美观，因此希望可以找到一个比较好的解决方案。自己先做了一个简单的demo来展示问题。

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script src="./js/jquery-1.11.1.min.js"></script><style>.img1{width:200px;height:200px;border: 1px solid #000;overflow: hidden;margin: 10px;}.img2{width:200px;height:90px;border: 1px solid #000;overflow: hidden;margin: 10px;}  </style>
</head>
<body><div class="img1" style="width:"><img id="img1" src="./img/1.jpg" height="100%" width="100%"></div><div class="img2" style="width:"><img id="img2" src="./img/1.jpg" height="100%" width="100%"></div>
</body>
</html>

上述这种情况还是挺影响美观的，是否可以考虑动态的设置图片的尺寸呢？

解决思路

是否可以在浏览器加载图片资源后，获取图片的真实尺寸和图片容器的大小，然后动态地设置图片的width、height属性。

获取图片的真实尺寸

html5下已经提供了相应的方法来返回图片的真实尺寸大小（img.naturalWidth、img.naturalHeight），针对IE6/7/8也可以通过以下方法来获取真实尺寸的大小

var imgae = new Image();image.src = img.src;image.onload = function() {var w = image.width;var h = image.height;
}

下面就编写对应的JS方法获取图片的真实尺寸已经图片容器的尺寸大小

setImgSize : function(img, callback) {if (img.naturalWidth) { //html5callback(img, img.naturalWidth, img.naturalHeight, img.width, img.height);} else { // IE 6 7 8var imgae = new Image();image.src = img.src;image.onload = function() {callback(img, image.width, image.height, img.width, img.height);}}
}

重新设置图片尺寸

在获取图片真实尺寸已经容器尺寸之后，我们需要重新设置图片的尺寸大小。这里先简单的介绍下处理目标：如果设置后的尺寸超过展示区域，则展示图片的中间部分，如果展示区域大于图片尺寸，则图片居中显示。用图简单说明下，黑色实线为图片的显示区域，绿色部分为图片的大小。

下面我们提供三种方法来处理图片，分别实现上部两种（宽度一致）、下部两种（高度一致）、右侧两种（铺满显示区域），下面就分别介绍这三种方法：

一、保证宽度一致

//原始宽度 原始高度 容器宽度 容器高度
//保证宽度一致
resetImgSizeW : function(img, nw, nh, w, h) {nwh = nw / nh;wh = w / h;if (nwh > wh) {img.width = w;var height = parseInt(1 / nwh * w);img.height = height;var top = parseInt((h - height) / 2);img.style.marginTop = top + "px";} else if (nwh < wh) {img.width = w;var height = parseInt(1 / nwh * w);img.height = height;var top = parseInt((height - h) / 2) * -1;img.style.marginTop = top + "px";} else {img.height = h;img.width = w;}
},

在这里我们需要判断图片原始尺寸的长宽比例以及容器的长宽比例之间的关系，如果高度富裕，那就相应将图片往上移动一定的像素，如果高度不足，就将图片往下移动相应的像素，至于其他的两种情况也是同样的逻辑，先看下处理后的效果：

二、保证高度一致

//原始宽度 原始高度 容器宽度 容器高度
//保证高度一致
resetImgSizeH : function(img, nw, nh, w, h) {nwh = nw / nh;wh = w / h;if (nwh > wh) {img.height = h;var width = parseInt(nwh * h);img.width = width;var left = parseInt((width - w) / 2) * -1;img.style.marginLeft = left + "px";} else if (nwh < wh) {img.height = h;var width = parseInt(nwh * h);img.width = width;var left = parseInt((w - width) / 2);img.style.marginLeft = left + "px";} else {img.height = h;img.width = w;}
}

三、铺满显示区域

//原始宽度 原始高度 容器宽度 容器高度
//铺满全屏
resetImgSizeWH : function(img, nw, nh, w, h) {nwh = nw / nh;wh = w / h;if (nwh > wh) {img.height = h;var width = parseInt(nwh * h);img.width = width;var left = parseInt((width - w) / 2) * -1;img.style.marginLeft = left + "px";} else if (nwh < wh) {img.width = w;var height = parseInt(1 / nwh * w);img.height = height;var top = parseInt((height - h) / 2) * -1;img.style.marginTop = top + "px";} else {img.height = h;img.width = w;}
},

如何使用JS

上面对实现的逻辑以及最终的效果做了简单的介绍，下面就介绍下如何使用。

<!-- 引用js脚本 -->
<script src="./js/imageLoad.js"></script>
<script>var imageLoad = new ImageLoad();//处理网站上所有的图片，下面三种只能使用一种//imageLoad.initImg("w");//保证宽度一致//imageLoad.initImg("h");//保证高度一致//imageLoad.initImg("wh");//铺满显示区域//处理单个图片，对于多个自己可以写循环语句来实现imageLoad.setImgSize(document.getElementById("img1"), imageLoad.resetImgSizeW);imageLoad.setImgSize(document.getElementById("img2"), imageLoad.resetImgSizeW);imageLoad.setImgSize(document.getElementById("img3"), imageLoad.resetImgSizeH);imageLoad.setImgSize(document.getElementById("img4"), imageLoad.resetImgSizeH);imageLoad.setImgSize(document.getElementById("img5"), imageLoad.resetImgSizeWH);imageLoad.setImgSize(document.getElementById("img6"), imageLoad.resetImgSizeWH);
</script>

ImageLoad源码

$(document).ready(function() { new ImageLoad();
});ImageLoad = function(){this.init();
};ImageLoad.prototype = {init : function () {
//      this.initImg("w");},initImg : function(type) {var _this = this;var imgs = document.getElementsByTagName('img');for (var i=0; i<imgs.length; i++) {try {var img = imgs[i];if ("w" == type) {$(img).onload = _this.setImgSize(img, _this.resetImgSizeW);} else if ("h" == type) {$(img).onload = _this.setImgSize(img, _this.resetImgSizeH);} else if ("wh" == type) {$(img).onload = _this.setImgSize(img, _this.resetImgSizeWH);} } catch(e) {}}},//原始宽度 原始高度 容器宽度 容器高度//保证高度一致resetImgSizeH : function(img, nw, nh, w, h) {nwh = nw / nh;wh = w / h;if (nwh > wh) {img.height = h;var width = parseInt(nwh * h);img.width = width;var left = parseInt((width - w) / 2) * -1;img.style.marginLeft = left + "px";} else if (nwh < wh) {img.height = h;var width = parseInt(nwh * h);img.width = width;var left = parseInt((w - width) / 2);img.style.marginLeft = left + "px";} else {img.height = h;img.width = w;}},//原始宽度 原始高度 容器宽度 容器高度//保证宽度一致resetImgSizeW : function(img, nw, nh, w, h) {nwh = nw / nh;wh = w / h;if (nwh > wh) {img.width = w;var height = parseInt(1 / nwh * w);img.height = height;var top = parseInt((h - height) / 2);img.style.marginTop = top + "px";} else if (nwh < wh) {img.width = w;var height = parseInt(1 / nwh * w);img.height = height;var top = parseInt((height - h) / 2) * -1;img.style.marginTop = top + "px";} else {img.height = h;img.width = w;}},//原始宽度 原始高度 容器宽度 容器高度//铺满全屏resetImgSizeWH : function(img, nw, nh, w, h) {nwh = nw / nh;wh = w / h;if (nwh > wh) {img.height = h;var width = parseInt(nwh * h);img.width = width;var left = parseInt((width - w) / 2) * -1;img.style.marginLeft = left + "px";} else if (nwh < wh) {img.width = w;var height = parseInt(1 / nwh * w);img.height = height;var top = parseInt((height - h) / 2) * -1;img.style.marginTop = top + "px";} else {img.height = h;img.width = w;}},//获取图片真实尺寸以及容器尺寸setImgSize : function(img, callback) {if (img.naturalWidth) { //html5callback(img, img.naturalWidth, img.naturalHeight, img.width, img.height);} else { // IE 6 7 8var imgae = new Image();image.src = img.src;image.onload = function() {callback(img, image.width, image.height, img.width, img.height);}}},
}

上面代码还有很多可以优化的地方，欢迎大家在评论区留言交流

-------------------------------------------------------------------------------------------------
小福利
-------------------------------------------------------------------------------------------------
个人在极客学院上《Lucene案例开发》课程已经上线了，欢迎大家吐槽~

第一课：Lucene概述

第二课：Lucene 常用功能介绍

第三课：网络爬虫

第四课：数据库连接池

第五课：小说网站的采集

第六课：小说网站数据库操作

第七课：小说网站分布式爬虫的实现

第八课：Lucene实时搜索

第九课：索引的基础操作

使用JavaScript解决网页图片拉伸问题相关推荐

解决background图片拉伸问题
解决background图片拉伸问题参考文章: (1)解决background图片拉伸问题 (2)https://www.cnblogs.com/zhengshiqiang47/p/6182172. ...
用JavaScript实现网页图片等比例缩放
如何让网页中的图片等比例缩放呢,我参考了一些代码并自己写了个图片缩放的脚本,可以点击放大,同时用鼠标滑轮自由缩放,希望提出不同意见. 首先看看resizeimg函数的源代码: function res ...
html img和背景图处理图片不拉伸_解决background图片拉伸问题
ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸.src是图片内容(前 ...
网络计算机不显示不出来,网页图片显示不出来怎么办网络故障解决【详解】...
网页图片显示不出来怎么办? 文字与图片是构成一个网页的两个最基本的元素.你可以简单地理解为:文字,就是网页的内容.图片,就是网页的美观.除此之外,网页的元素还包括动画.音乐.程序等等. 有时候我们浏览 ...
怎么让图片从左往右移动php,javascript - 想让图片上那个块，在增加块的宽度的时候向右边移动，而不是向左边移动。需要怎么解决？...
javascript - 想让图片上那个块,在增加块的宽度的时候向右边移动,而不是向左边移动.需要怎么解决? 滿天的星座2017-07-05 10:39:20 0 2 212 * { marg ...
html插入图片出现红叉,网页图片显示红色叉怎么回事网页图片有些不显示的有效解决方法...
浏览各种网页是很多小伙伴们的日常,所以很多的网页知识都大概知道,当然也会遇到一些网页上的问题,比如说在浏览网页时图片全部不显示并且有红叉,相信大多数的朋友都会瞬间关闭然后打开另外一个页面,如果这张图片 ...
qwebkit 网页无法加载图片_网页图片无法显示了？这样就能解决
我们发现部分的网页图片无法显示,部分网页验证码也无法显示.或者安装一些软件时,按钮只显示文字,不显示背景图片,只显示一个红叉. 此类问题比较普遍,通常可以从以下两个方面解决. 一.查看浏览器设置. 如 ...
android 解决按钮、imageView 背景图片拉伸变大的问题
相信很多都遇到了设置布局里面的按钮或textview等其他控件的背景图片的时候,你会抱怨美工给的图片,怎么一运行放到手机上面,就严重变形了,一点都不友好一点都不专业,但我觉得这完全不是美工的问题,作为 ...
本地html图片载入很慢,打开网页时图片加载很慢怎么办？网页图片打开慢的解决方法...
打开网页里的图片很慢怎么办,电脑打开带图片的网页速度很慢的原因有网速的原因也有电脑配置和软件设置的因素. 电脑打开带图片的网页速度很慢是什么原因清理影响网页打开速度的因素 cookies,开始-控制 ...

使用JavaScript解决网页图片拉伸问题

使用JavaScript解决网页图片拉伸问题相关推荐

最新文章

热门文章