首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onNovember 25, 2016

问题描述

这段时间在做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解决网页图片拉伸问题(推荐)

- Author -

极乐君

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JQuery写动态树示例代码
Jul 31 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
javascript模拟命名空间
Apr 17 Javascript
JavaScript电子时钟倒计时第二款
Jan 10 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 Javascript
ES2020让代码更优美的运算符 (?.) (??)
Jan 04 Javascript
js移动焦点到最后位置的简单方法
Nov 25 #Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 #Javascript
深入浅析Vue组件开发
Nov 25 #Javascript
javascript中href和replace的比较(详解)
Nov 25 #Javascript
移动适配的几种方案(三种方案)
Nov 25 #Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 #Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 #Javascript
virtualenv(1) scrapy(1) DeOldify(1) Postman(1) 共享文件夹(1) 加载异常(1) 横向滚动(1) BottomSheetDialog(1) localStorage(1) 骨架屏(1)
You might like
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
thinkPHP3.2.3结合Laypage实现的分页功能示例
2018/05/28 PHP
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
图文详解vue框架安装步骤
2019/02/12 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
原生js实现分页效果
2020/09/23 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
python实现最速下降法
2020/03/24 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
python中实现栈的三种方法
2020/12/19 Python
HTML5之语义标签介绍
2016/07/07 HTML / CSS
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
请说出你所知道的线程同步的方法
2013/04/19 面试题
领导调研接待方案
2014/02/27 职场文书
行政管理专业求职信
2014/07/06 职场文书
解除劳动合同证明书
2014/09/26 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript