使用JavaScript解決網(wǎng)頁圖片拉伸問題(推薦)
更新時(shí)間：2016年11月25日 10:44:37 作者：極樂君
本文給大家介紹使用javascript解決網(wǎng)頁圖片拉伸問題，本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧
問題描述
這段時(shí)間在做PM的需求的時(shí)候突然發(fā)現(xiàn)一個(gè)問題，產(chǎn)品上的圖片來自多個(gè)第三方，具體的尺寸無法確定，如果直接在樣式中寫死圖片的尺寸大小就會(huì)出現(xiàn)圖片拉伸的現(xiàn)象，十分影響產(chǎn)品的美觀，因此希望可以找到一個(gè)比較好的解決方案。自己先做了一個(gè)簡單的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>
上述這種情況還是挺影響美觀的，是否可以考慮動(dòng)態(tài)的設(shè)置圖片的尺寸呢？
解決思路
是否可以在瀏覽器加載圖片資源后，獲取圖片的真實(shí)尺寸和圖片容器的大小，然后動(dòng)態(tài)地設(shè)置圖片的width、height屬性。
獲取圖片的真實(shí)尺寸
html5下已經(jīng)提供了相應(yīng)的方法來返回圖片的真實(shí)尺寸大小（img.naturalWidth、img.naturalHeight），針對(duì)IE6/7/8也可以通過以下方法來獲取真實(shí)尺寸的大小。
var imgae = new Image();
image.src = img.src;
image.onload = function() {
var w = image.width;
var h = image.height;
}
下面就編寫對(duì)應(yīng)的JS方法獲取圖片的真實(shí)尺寸已經(jīng)圖片容器的尺寸大小。
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);
}
}
}
重新設(shè)置圖片尺寸
在獲取圖片真實(shí)尺寸已經(jīng)容器尺寸之后，我們需要重新設(shè)置圖片的尺寸大小。這里先簡單的介紹下處理目標(biāo)：如果設(shè)置后的尺寸超過展示區(qū)域，則展示圖片的中間部分，如果展示區(qū)域大于圖片尺寸，則圖片居中顯示。用圖簡單說明下，黑色實(shí)線為圖片的顯示區(qū)域，綠色部分為圖片的大小。
下面我們提供三種方法來處理圖片，分別實(shí)現(xiàn)上部兩種（寬度一致）、下部兩種（高度一致）、右側(cè)兩種（鋪滿顯示區(qū)域），下面就分別介紹這三種方法：
一、保證寬度一致
//原始寬度 原始高度 容器寬度 容器高度
//保證寬度一致
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;
}
},
在這里我們需要判斷圖片原始尺寸的長寬比例以及容器的長寬比例之間的關(guān)系，如果高度富裕，那就相應(yīng)將圖片往上移動(dòng)一定的像素，如果高度不足，就將圖片往下移動(dòng)相應(yīng)的像素，至于其他的兩種情況也是同樣的邏輯，先看下處理后的效果：
二、保證高度一致
//原始寬度 原始高度 容器寬度 容器高度
//保證高度一致
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;
}
}
三、鋪滿顯示區(qū)域
//原始寬度 原始高度 容器寬度 容器高度
//鋪滿全屏
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
上面對(duì)實(shí)現(xiàn)的邏輯以及最終的效果做了簡單的介紹，下面就介紹下如何使用。
<!-- 引用js腳本 -->
<script src="./js/imageLoad.js"></script>
<script>
var imageLoad = new ImageLoad();
//處理網(wǎng)站上所有的圖片，下面三種只能使用一種
//imageLoad.initImg("w");//保證寬度一致
//imageLoad.initImg("h");//保證高度一致
//imageLoad.initImg("wh");//鋪滿顯示區(qū)域
//處理單個(gè)圖片，對(duì)于多個(gè)自己可以寫循環(huán)語句來實(shí)現(xiàn)
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;
}
},
//獲取圖片真實(shí)尺寸以及容器尺寸
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解決網(wǎng)頁圖片拉伸問題，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
詳解WordPress開發(fā)中g(shù)et_current_screen()函數(shù)的使用
這篇文章主要介紹了WordPress開發(fā)中g(shù)et_current_screen()函數(shù)的使用,get_current_screen()通常在對(duì)象的實(shí)例化時(shí)使用,需要的朋友可以參考下2016-01-01
解決JSON.stringify()自動(dòng)將中文轉(zhuǎn)譯成unicode的問題
下面小編就為大家分享一篇解決JSON.stringify()自動(dòng)將中文轉(zhuǎn)譯成unicode的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01
Javascript Function.prototype.bind詳細(xì)分析
這篇文章主要介紹了Javascript Function.prototype.bind詳細(xì)分析的相關(guān)資料,需要的朋友可以參考下2016-12-12
詳解JavaScript運(yùn)算符中==和===的區(qū)別
在JavaScript中==運(yùn)算符和===運(yùn)算符是經(jīng)常遇到的，那么二者有哪些區(qū)別呢，本文就來和大家進(jìn)行簡單的討論，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)學(xué)習(xí)2023-05-05
使用bat打開多個(gè)cmd窗口執(zhí)行g(shù)ulp、node
本文主要介紹了使用bat打開多個(gè)cmd窗口執(zhí)行g(shù)ulp、node的方法。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
前端實(shí)現(xiàn)跨頁面通信的最全實(shí)現(xiàn)方案指南
這篇文章將從同源頁面,不同源頁面,父子框架三個(gè)維度,詳細(xì)為大家講解前端跨頁面通信的各種實(shí)現(xiàn)方案,并提供代碼示例和對(duì)比分析,需要的小伙伴可以參考下2025-04-04
這篇文章主要介紹了JS兩種類型的表單提交方法,結(jié)合實(shí)例形式分析了2種常用的表單提交驗(yàn)證的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11
淺談JS數(shù)組內(nèi)置遍歷方法有哪些和區(qū)別
本文主要介紹了淺談JS數(shù)組內(nèi)置遍歷方法有哪些和區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
JavaScript中正則表達(dá)式判斷匹配規(guī)則及常用方法
JS作為一門常用于web開發(fā)的語言，必然要具備正則這種強(qiáng)大的特性，本文將對(duì)JS中的正則用法及常用函數(shù)進(jìn)行一番總結(jié)2017-08-08
下面小編就為大家?guī)硪黄猨s獲取所有checkbox值的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05