使用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 相关文章推荐
你可能不再需要JQUERY
Mar 09 Javascript
用js实现计算加载页面所用的时间
Apr 02 Javascript
js打印纸函数代码(递归)
Jun 18 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
Feb 16 Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
解析vue路由异步组件和懒加载案例
Jun 08 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
You might like
PHP中source #N问题的解决方法
2014/01/27 PHP
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
BootStrap扔进Django里的方法详解
2016/05/13 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
基于jquery实现左右上下移动效果
2018/05/02 jQuery
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
python自动化测试实例解析
2014/09/28 Python
Python温度转换实例分析
2018/01/17 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
解决Django中多条件查询的问题
2019/07/18 Python
Django app配置多个数据库代码实例
2019/12/17 Python
python开发入门——set的使用
2020/09/03 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
关于递归的一道.NET面试题
2013/05/12 面试题
迅雷Cued工作心得体会
2014/01/27 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
优秀教研组申报材料
2014/12/26 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL
微信小程序实现聊天室功能
2021/06/14 Javascript
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS
Python使用Web框架Flask开发项目
2022/06/01 Python
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang