首页 / JAVASCRIPT / 使用JavaScript解决网页图片拉伸问题(推荐)

使用JavaScript解决网页图片拉伸问题(推荐)

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了使用JavaScript解决网页图片拉伸问题(推荐)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7336字，纯文字阅读大概需要11分钟。

内容图文

问题描述

这段时间在做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>

使用JavaScript解决网页图片拉伸问题(推荐) - 文章图片

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

解决思路

是否可以在浏览器加载图片资源后，获取图片的真实尺寸和图片容器的大小，然后动态地设置图片的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) { //html5
callback(img, img.naturalWidth, img.naturalHeight, img.width, img.height);
} else { // IE 6 7 8
var imgae = new Image();
image.src = img.src;
image.onload = function() {
callback(img, image.width, image.height, img.width, img.height);
}
}
}

重新设置图片尺寸

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

使用JavaScript解决网页图片拉伸问题(推荐) - 文章图片

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

一、保证宽度一致

//原始宽度 原始高度 容器宽度 容器高度
//保证宽度一致
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;
}
},

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

使用JavaScript解决网页图片拉伸问题(推荐) - 文章图片

二、保证高度一致

//原始宽度 原始高度 容器宽度 容器高度
//保证高度一致
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;
}
}

使用JavaScript解决网页图片拉伸问题(推荐) - 文章图片

三、铺满显示区域

//原始宽度 原始高度 容器宽度 容器高度
//铺满全屏
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;
}
},

使用JavaScript解决网页图片拉伸问题(推荐) - 文章图片

如何使用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) { //html5
callback(img, img.naturalWidth, img.naturalHeight, img.width, img.height);
} else { // IE 6 7 8
var imgae = new Image();
image.src = img.src;
image.onload = function() {
callback(img, image.width, image.height, img.width, img.height);
}
}
},
}

以上所述是小编给大家介绍的使用JavaScript解决网页图片拉伸问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

内容总结

以上是互联网集市为您收集整理的使用JavaScript解决网页图片拉伸问题(推荐)全部内容，希望文章能够帮你解决使用JavaScript解决网页图片拉伸问题(推荐)所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/348256.html

来源：【匿名】

【上一篇】JS两种类型的表单提交方法实例分析【下一篇】javascript 怎么调用php方法

更多 ►

【使用JavaScript解决网页图片拉伸问题(推荐)】教程文章相关的互联网学习教程文章

javascript(js)小数精度丢失的解决方案【代码】

原因:js按照2进制来处理小数的加减乘除,在arg1的基础上将arg2的精度进行扩展或逆扩展匹配,所以会出现如下情况.javascript(js)的小数点加减乘除问题，是一个js的bug如0.3*1 = 0.2999999999等，下面列出可以完美求出相应精度的四种js算法function accDiv(arg1,arg2){ var t1=0,t2=0,r1,r2; try{t1=arg1.toString().split(".")[1].length}catch(e){} try{t2=arg2.toString().split(".")[1].length}catch(e){} with(Math){ ...

javascript中跨域问题的解决方法汇总

javascript中实现跨域的方式总结第一种方式：jsonp请求；jsonp的原理是利用<script>标签的跨域特性，可以不受限制地从其他域中加载资源，类似的标签还有<img>.第二种方式：document.domain；这种方式用在主域名相同子域名不同的跨域访问中第三种方式：window.name；window的name属性有个特征：在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是...

JavaScript中的ParseInt("08")和“09”返回0的原因分析及解决办法

今天在程序中出现一个bugger ,调试了好久，最后才发现，原来是这个问题。做了一个实验：alert(parseInt("01")),当这个里面的值为01====》07时都是正常的，但是在"08","09"就会返回0（这种现象出现在ie内核的浏览器中，如360浏览器就会出现这种错误）(谷歌，火狐不受影响)。查阅资料得知着这种现象原因：大神的解释：01--07自然没有问题，但是09,08都是不合格的八进制形式，所以被按照0处理了。为了解决这个问题，可以利用parseInt函...

javascript兼容问题 : let降级到var 遇到的闭包问题的解决方法【代码】

我用 for(let x in y) 循环一个图片元素数组。for (let x in arr) {arr[x].onload = function(){ /* ... */ } }这样写是没有问题的，因为：for (let x...)的循环在每次迭代时都为x创建新的绑定。 ...在ES标准中，有一段是关于CreatePerIterationEnvironment，也就是for语句每次循环所要建立环境的步骤，里面有提及有关词法环境的相关步骤(LexicalEnvironment)，这与使用let时会有关。所以，如果你使用了let而不是var，let的变量...

JavaScript跨域总结与解决办法

什么是跨域1、document.domain+iframe的设置2、动态创建script3、利用iframe和location.hash4、window.name实现的跨域数据传输5、使用HTML5 postMessage6、利用flash本文来自网络（http://f2e.me/200904/cross-scripting/，该网址已不能访问），仅作个人读书笔记之用，并稍作修改和补充。什么是跨域JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这...

一次js代码修改不更新问题的解决【图】

今天遇到一个问题，虽说问题不大，但弄得本人脑袋发麻我讲javascript修改后，刷新页面或者清除浏览器缓存，修改后的效果也不出现，害的我好苦啊最后想到自己是新装的机子是不是是浏览器设置的原因按以下方式完美解决这应该是开发人员必须设置的原文：http://www.cnblogs.com/haquanwen/p/3822519.html

js代码从页面移植到文件中失效或js代码修改后不起作用的解决办法

最近在做关于网站的项目，总是发生这样的问题写的javascript代码在页面上没有问题，但是将js代码移植到.js的文件中，在页面上进行调用，总是出现失效等错误另外修改后的js代码，重新刷新网页仍然不起作用经过大量搜索并经过验证，可以用下面方法来解决将js代码封装到js文件中失效的原因可能是js文件中存在中文注释，导致在执行的时候中断，在js文件尽量不要写中文注释修改后的js代码刷新网页后不起效果可能是因为你所用的...

jquery load()重复加载，多次加载 js 和css问题的解决办法

jquery load + div实现异步加载资源，出现重复js和css资源的重复加载，导致js失效或重复执行等问题：调用load前执行语句： $.ajax({cache: false}) 关闭ajax缓存。此方法已经过时 $.ajaxSetup ({ cache: false }); According to http://api.jquery.com/jQuery.ajaxSetup/ it‘s use isn‘t recommended.Try using $.ajax({cache: false}) instead. 原文：http://www.cnblogs.com/mengyehongmanshan/p/6856730.html

ajax innerHTML 拼接js 不执行，呈现解决方法

源代码：$.ajax({url : "<%=request.getContextPath()%>/cartree/testCartree.action",type : "GET",cache : false,async : false,data : {"method" : "selFun"},dataType : "json",contentType: "application/x-www-form-urlencoded; charset=utf-8", success : function(json){var lsgj_tree_context = "<script type=\"text/javascript\">"+"c = new dTree(\"c\");"+"c.config.useCookies = false;"+"c.config.useStatusText = ...

js如何实现事件监听和解决兼容性【代码】

一、为什么需要事件监听？我们可不可以为同一对象的同一事件绑定多个事件处理程序呢？通过行内绑定和动态绑定是不可以的，但是可以通过事件监听来实现。window.onload = function() {// 动态绑定document.getElementById(‘btn‘).onclick = function() {alert(‘first‘);}// 动态绑定document.getElementById(‘btn‘).onclick = function() {alert(‘second‘);} }<input type="button" value="点击" id="btn">二、如何实现事件...

在SharePoint解决方案中使用JavaScript【图】

在SharePoint解决方案中使用JavaScript (0)随着Web前段技术(JavaScript/HTML5)的日益发扬光大，在Web应用程序中，我们开始更多的使用JavaScript。很多以往是放在服务器上运行的逻辑，现在都开始逐渐的向前段转移。这种趋势不需要作者多说，只要是Web开发人员(包括SharePoint工程师)，都会有所体验。而在SharePoint平台，这种前端化的趋势也是相当明显的。当我们构建SharePoint解决方案的时候，JavaScript代码的数量在不断的增多，而...

android addJavascriptInterface 不能生效解决办法

1. webview.addJavascriptInterface() doen not work on API 16+常见的客户端与H5的混合编程是使用scheme+、JS bridge、provider等。在做Android 与 H5 客户端交互时，发现一个很诡异的错误。在一个4.2.2的三星S3上，Android　Javascript Bridge 会出现回调出错。所有挂在Bridge对象下的函数均无法找到。于是一点点排查问题到底出现在哪。其他手机H5混合编程消息回调正常，本以为是因为是旅行V3.0是基于Fragment引起的，即fragmen...

jQuery解决引用多个JavaScript库引起的$命名冲突的问题

在某些情况下，我们可能会在一个页面中使用多个JavaScript库，由于多个库中都是用$标识符，因此我们需要一种解决该命名冲突的方法，jQuery的noConflict()方法很好的解决了这个问题。jQuery调用该方法会把对$标识符的控制权限让渡给其他库使用。参考示例如下：<scriptsrc="prototype.js"></script><scriptsrc="jquery.js"></script> <script> jQuery.noConflict(); /* jQuery...

解决 MyEclipse build workspace 慢，validation javascript 更慢的问题【代码】

自从升级了MyEclipse到7.0，项目Build的时候总是很慢，显示Validating 那些js，html文件。不管我怎么调整 Windows > Preference > MyEclipse > Validation或者是manage validation,都没有用。我公司的电脑是Core2 Duo CPU T7250 @ 2.00GHz的CPU，每次validating的时候机器变的很迟缓我创建了新的Project，又添加了Web Capabilities，在这个过程中对.projet文件进行了跟踪比对，总算发现这个Build的时候进行Validation是从哪里定义的...

使用rxjs以及javascript解决前端的防抖和节流【代码】【图】

JavaScript实现方式:防抖触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间；思路：每次触发事件时都取消之前的延时调用方法：举个例子:做一个自动查询的功能假装下面的代码是从服务器获取的数据(下面会用到):// 假装这是个接口function getData(val){ returnnew Promise(function(resolve, reject){ setTimeout(function(){if(!val){resolve([]);return;}var json = [{name:"萧山...

首页 / JAVASCRIPT / 使用JavaScript解决网页图片拉伸问题(推荐)

使用JavaScript解决网页图片拉伸问题(推荐)

内容导读

内容图文

内容总结

内容备注

内容手机端

【使用JavaScript解决网页图片拉伸问题(推荐)】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程