首页
所有分类
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 相关文章推荐
捕获关闭窗口的脚本
Jan 10 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
Javascript函数式编程语言
Oct 11 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 Javascript
关于Js中new操作符的作用详解
Feb 21 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
忘记密码(1) B+树(2) muduo(1) 存储过程(3) 优化(1) TcpServer(1) 增删改查(2) redo log(1) instantclient(1) pt-archiver(1)
You might like
PHP计数器的实现代码
2013/06/08 PHP
Laravel 4 初级教程之Pages、表单验证
2014/10/30 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
基于HTML5上使用iScroll实现下拉刷新，上拉加载更多
2016/05/21 Javascript
详解Node.Js如何处理post数据
2016/09/19 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
基于vue.js无缝滚动效果
2018/01/25 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
js中数组常用方法总结（推荐）
2019/04/09 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
Python利用命名空间解析XML文档
2020/08/10 Python
英国在线电子和小工具商店：TecoBuy
2018/10/06 全球购物
什么是抽象
2015/12/13 面试题
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
2014全国两会学习心得体会1000字
2014/03/10 职场文书
医生辞职信范文
2015/03/02 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
导游词之任弼时故居
2020/01/07 职场文书
pytorch Dropout过拟合的操作
2021/05/27 Python
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技