2. 程式人生 > >使用JavaScript解決網頁圖片拉伸問題

使用JavaScript解決網頁圖片拉伸問題

阿新 • • 發佈：2018-12-25

個人部落格站已經上線了，網址 www.llwjy.com ~歡迎各位吐槽~

-------------------------------------------------------------------------------------------------

      在開始之前先打一個小小的廣告，自己建立一個QQ群：321903218，點選連結加入群【Lucene案例開發】，主要用於交流如何使用Lucene來建立站內搜尋後臺，同時還會不定期的在群內開相關的公開課，感興趣的童鞋可以加入交流。

問題描述

      這段時間在做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>


      上述這種情況還是挺影響美觀的，是否可以考慮動態的設定圖片的尺寸呢？

解決思路

      是否可以在瀏覽器載入圖片資源後，獲取圖片的真實尺寸和圖片容器的大小，然後動態地設定圖片的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);
                }
	}
}

重新設定圖片尺寸

      在獲取圖片真實尺寸已經容器尺寸之後，我們需要重新設定圖片的尺寸大小。這裡先簡單的介紹下處理目標：如果設定後的尺寸超過展示區域，則展示圖片的中間部分，如果展示區域大於圖片尺寸，則圖片居中顯示。用圖簡單說明下，黑色實線為圖片的顯示區域，綠色部分為圖片的大小。


      下面我們提供三種方法來處理圖片，分別實現上部兩種（寬度一致）、下部兩種（高度一致）、右側兩種（鋪滿顯示區域），下面就分別介紹這三種方法：

一、保證寬度一致

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

      在這裡我們需要判斷圖片原始尺寸的長寬比例以及容器的長寬比例之間的關係，如果高度富裕，那就相應將圖片往上移動一定的畫素，如果高度不足，就將圖片往下移動相應的畫素，至於其他的兩種情況也是同樣的邏輯，先看下處理後的效果：


二、保證高度一致

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


三、鋪滿顯示區域

//原始寬度 原始高度 容器寬度 容器高度
//鋪滿全屏
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

      上面對實現的邏輯以及最終的效果做了簡單的介紹，下面就介紹下如何使用。

<!-- 引用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);
	        }
		}
	},
}

      上面程式碼還有很多可以優化的地方，歡迎大家在評論區留言交流

-------------------------------------------------------------------------------------------------
小福利
-------------------------------------------------------------------------------------------------
      個人在極客學院上《Lucene案例開發》課程已經上線了，歡迎大家吐槽~


相關推薦

使用JavaScript解決網頁圖片拉伸問題

個人部落格站已經上線了，網址 www.llwjy.com ~歡迎各位吐槽~-------------------------------------------------------------------------------------------------   

安卓新增背景圖片時解決圖片拉伸問題

問題描述： 當我們在android layout佈局檔案設定背景圖片只需要加上 android:background="@drawable/ic_bg"  就可以了設定ic_bg為背景的圖片了 然而這樣設定後當圖片較小時會發現 圖片被拉伸了，失真。     解決方法

Android Camera 自動適配多種螢幕，解決預覽照片拉伸和儲存的圖片拉伸

最近公司需要做一個手機自拍照的功能，由於之前有做過類似手機拍照的功能，所以很快就實現了自定義手機拍的功能。但是後面發現部分手機出現預覽照片拉伸和儲存的圖片拉伸的情況。然後百度了一下，發現原理很好理解，也有一堆demo，然而並沒有解決拉伸的情況。下面總結一下我的解決方法，希望對

詳解onMeasure()(二)--利用onMeasure測量來實現圖片拉伸永不變形，解決螢幕適配問題

原文地址 ：http://blog.csdn.net/cyp331203/article/details/45027641   上一篇文章詳細講解了一下onMeasure/measure方法在Android自定義控制元件時的原理和作用，參看博文：Androi

uiimageView 的圖片拉伸問題的解決辦法

設定 UIImageView 的contentMode屬性，根據自己的需要選擇下面 UIViewContentModeScaleToFill, UIViewContentModeScaleAspectFit, // 原比例，不變形，

Android自定義控制元件系列八：詳解onMeasure()(二)--利用onMeasure測量來實現圖片拉伸永不變形，解決螢幕適配問題

        上一篇文章詳細講解了一下onMeasure/measure方法在Android自定義控制元件時的原理和作用，參看博文：Android自定義控制元件系列七：詳解onMeasure()方法中如何測量一個控制元件尺寸(一)，今天就來真正實踐一下，讓這兩個方法大顯神威來幫我們搞定圖片的螢幕適配問題。

C# 解決DrawImage繪製圖片拉伸產生漸變

方法一： ImageAttributes ImgAtt = new ImageAttributes(); ;                 ImgAtt.SetWrapMode(System.Drawing.Drawing2D.WrapMode.TileFlipXY)

製作html網頁時如何使用CSS使背景圖片拉伸（填充）

答案：background-size: cover; 例1： <!DOCTYPE html> <html lang="en"> <head>

網頁背景圖片拉伸效果

弄了很久才發現原來background-image的大小不會隨視窗大小變化，也不會有自動拉伸的效果的。。 然後弄了半天還是用js控制的，網上查的程式碼加上自己寫的，混搭。。然後成功了。。 很明顯是瞎貓碰死耗子。。最近放假比較懶，所以沒有仔細鑽研了。。QQ空間的背景圖片控制也

App啟動時白屏&使用BitmapDrawable解決啟動頁背景圖片拉伸

一，App啟動時，會白屏或者黑屏，採用如下方法解決: 1.啟動頁的Activity設定style <activity android:name=".activity.SplashActivity" an

UIWebView網頁背景拉伸圖片

在我的app中，要顯示gif格式的圖片，由於UIWebView可以顯示這樣的圖片格式，所以用了UIWebView這個控制元件載入本地網頁，網頁中gif的圖片為拉伸的背景圖片。網頁如下： <body leftmargin=0 topmargin=0> <di

ios25---圖片拉伸

哪些 小碼哥 style n) named @property name insets 保護 控制器： // // ViewController.m // 12-圖片的拉伸問題 // // Created by xiaomage on 15/12/30. //

iOS圖片拉伸技巧

div 大小 hle lstat log 需要 sets width pin iOS圖片拉伸技巧 本文目錄 一、iOS 5.0之前 二、iOS 5.0 三、iOS 6.0 縱觀移動市場，一款移動app，要想長期在移動市場立足，最起碼要包含以下幾個要素：實用的功能、極強的

背景圖片拉伸，計算屏幕寬度和獲取控件寬高

屏幕寬度 ack context splay ots focus pri bool thp 背景圖片拉伸： 那麽如果我們想在Activity的onCreate方法或者是onReusme方法獲取組件的寬高怎麽辦呢？這裏提供了以下的五種方式：http://blog.csdn.

圖片拉伸，改變長寬比

bsp anti resize imp nbsp 拉伸 cpp port res 圖片拉伸，改變長寬比 from PIL import Image logo=‘fugu.png‘ mid_icon = Image.open(logo) mid_icon_w, mi

圖片拉伸

圖片 ger space convert -s con str view 圖片拉伸 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Menlo; color: #ffffff; background-color:

JavaScript解決select下拉框中的內容太長顯示不全的問題

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

css 如何讓背景圖片拉伸填充避免重複顯示

如何讓背景圖片拉伸填充，這個問題聽起來似乎很簡單。但是很遺憾的告訴大家。不是我們想的那麼簡單。  比如一個容器（body,div,span）中設定一個背景。這個背景的長寬值在css2.1之前是不能被修改的。  所以實際的結果是隻能重複顯示，所以出現了repeat,repeat-x

iOS 實現類似安卓.9.png圖片拉伸效果

// >= ios 5.0 UIImage *image = [[UIImage imageNamed:@"bg_box"] resizableImageWithCapInsets:UIEdgeInsetsMake(0,10,0,10)]; // < io

Python中Selenium解決網頁下拉選單按鈕

1.匯入（import） 你可以用以下方式匯入： from selenium.webdriver.support.ui import Select # 或者直接從select匯入 # from selenium.webdriver.support.select impo