快捷導(dǎo)航

js+CSS 圖片等比縮小并垂直居中實(shí)現(xiàn)代碼

更新時間：2008年12月01日 19:57:07 作者：

本例子在在 ff 2.0/ ie6 / ie7 中測試通過。但在 opera 8.5 cn中沒有通過。希望大家測試。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>圖片自動等比例縮小且垂直居中-www.fzitv.net </title> 
<!--[if lte IE 6]> 
<script type="text/javascript" language="javascript"> 
function imgFix() { 
//定義要限制的圖片寬高,這個寬高要同style里面定義的相同，小于限定高寬的圖片不操作 
var widthRestriction = 200; 
var heightRestriction = 200; 
var allElements = document.getElementsByTagName('*') 
for (var i = 0; i < allElements.length; i++) 
{ 
if (allElements[i].className.indexOf('imgBox') >= 0) 
{ 
var imgElements = allElements[i].getElementsByTagName('img'); 
for (var j=0; j < imgElements.length; j++) 
{ 
if ( imgElements[j].width > widthRestriction || imgElements[j].height > heightRestriction ) 
{ 
if ( imgElements[j].width > imgElements[j].height) 
{ 
imgElements[j].height = imgElements[j].height*(widthRestriction/imgElements[j].width); 
imgElements[j].width = widthRestriction; 
} else 
{ 
imgElements[j].width = imgElements[j].width*(heightRestriction/imgElements[j].height); 
imgElements[j].height = heightRestriction; 
} 
} 
if ( imgElements[j].height < heightRestriction ) 
{ 
imgElements[j].style.paddingTop = ( heightRestriction -imgElements[j].height ) /2 + "px"; 
} 
} /*for j*/ 
} 
}/*for i*/ 
} 
window.onload = imgFix; 
</script> 
<![endif]--> 
<style type="text/css"> 
<!-- 
* { 
margin:0; 
padding:0; 
} 
.imgBox li { 
list-style:none; 
width:200px; /* 寬度 */ 
height:200px; /* 高度 */ 
background:#ccc; 
border:1px solid #666; 
text-align:center; 
margin:5px; 
line-height:200px; 
} 
.imgBox img { 
max-width:200px; /* 寬度 */ 
max-height:200px; /* 高度 */ 
vertical-align:middle; 
} 
--> 
</style> 
</head> 
<body> 
<ul class="imgBox"> 
<li><img src="......" alt="img" /></li> 
<li><img src="......" alt="img" /></li> 
<li><img src="......" alt="img" /></li> 
<li><img src="......" alt="img" /></li> 
</ul> 
</body> 
</html>

您可能感興趣的文章:

相關(guān)文章

微信小程序?qū)崿F(xiàn)全局搜索代碼高亮的示例
本篇文章主要介紹了微信小程序?qū)崿F(xiàn)全局搜索代碼高亮的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
詳解自定義ajax支持跨域組件封裝
本篇文章給大家詳細(xì)分析了自定義ajax支持跨域組件封裝相關(guān)的知識點(diǎn)，對此有興趣的朋友參考學(xué)習(xí)下。
2018-02-02
JavaScript實(shí)現(xiàn)刷新不重記的倒計(jì)時
網(wǎng)上關(guān)于JavaScript實(shí)現(xiàn)倒計(jì)時的文章有很多，但是一般都是刷新后會重新開始計(jì)時，可是我們有的時候會需要刷新卻不重新計(jì)算的倒計(jì)時，這該怎么做呢？下面我們一起來看看這種倒計(jì)時怎么實(shí)現(xiàn)吧。
2016-08-08
JavaScript前端面試扁平數(shù)據(jù)轉(zhuǎn)tree與tree數(shù)據(jù)扁平化
這篇文章主要為大家介紹了JavaScript面試中扁平數(shù)據(jù)轉(zhuǎn)tree以及tree數(shù)據(jù)扁平化示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-06-06
JS實(shí)現(xiàn)可移動模態(tài)框
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)可移動模態(tài)框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
[Bootstrap-插件使用]Jcrop+fileinput組合實(shí)現(xiàn)頭像上傳功能實(shí)例代碼
這篇文章主要介紹了[Bootstrap-插件使用]Jcrop+fileinput組合實(shí)現(xiàn)頭像上傳功能實(shí)例代碼,非常具有實(shí)用價(jià)值，需要的朋友可以參考下。
2016-12-12
WebGL利用FBO完成立方體貼圖效果完整實(shí)例(附demo源碼下載)
這篇文章主要介紹了WebGL利用FBO完成立方體貼圖效果的方法,以完整實(shí)例形式分析了WebGL實(shí)現(xiàn)立方體貼圖的具體步驟與相關(guān)技巧,并附帶了demo源碼供讀者下載參考,需要的朋友可以參考下
2016-01-01
JS匿名函數(shù)和匿名自執(zhí)行函數(shù)概念與用法分析
這篇文章主要介紹了JS匿名函數(shù)和匿名自執(zhí)行函數(shù)概念與用法,結(jié)合實(shí)例形式分析了匿名函數(shù)和匿名自執(zhí)行函數(shù)的概念、功能、應(yīng)用場景及相關(guān)使用技巧,需要的朋友可以參考下
2018-03-03
JS隨即打亂數(shù)組實(shí)現(xiàn)代碼
使用javascript過程中，偶爾會用到數(shù)值，而且是打亂后的數(shù)值，本文將介紹一種高效打亂數(shù)組的方法,需要的朋友可以參考下
2012-12-12
同時使用n個window onload加載實(shí)例介紹
window onload加載多個同時使用，想必有很多人沒有用過吧，接下來為大家詳細(xì)介紹下具體的使用方法，感興趣的朋友可以參考下
2013-04-04