您的位置: 首頁 > 源碼資料
2種方法：js+css實現圖片自動等比例縮小且垂直居中
源碼資料 時間:2013-05-16 作者/發布人:科杰在線 點擊:3052
圖片自動等比例縮小，其實如果不考慮ie6的話，用css就可以實現，設定img的max-width和max-height，而<img>標簽內不設定widht和height即可。
ie7已經支持max-width和max-height，這是為數不多的好消息之一。但是對于ie6及以前的版本，就只能用js來設置了。
在ff2.0/ie6/ie7中測試通過。opera8.5 垂直居中未通過。
以下是引用片段：
<!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>圖片自動等比例縮小且垂直居中</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>
###############################################
另一種方法：兼容IE6 7 8 FF等主流瀏覽器 div中圖片垂直居中,圖片自動按邊框比例縮放
<!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.yeewaa.com</title>
<script language=javascript src="autoImg.js"></script>
</head><body>
<style type="text/css">
.box{
width:200px; height:200px; border: 1px solid #eee;
/**//*非IE的主流瀏覽器識別的垂直居中的方法*/
display: table-cell;vertical-align:middle;/**//*設置水平居中*/
text-align:center;/**//* 針對IE的Hack */
*display: block;
*font-size: 175px;/**//*約為高度的0.873，200*0.873 約為175*/
*font-family:Arial;/**//*防止非utf-8引起的hack失效問題，如gbk編碼*/}
.box img{/**//*設置圖片垂直居中*/vertical-align:middle;}
</style>
<div class="box">
<img src="www.yeewaa.com.jpg" onload="autoimg(this,200,200)" /></div>
</body>
</html>
請將下面綠色文字部分全選存成 autoImg.js文件
// JavaScript Document
function cssX(elem){//直接得到寬度
if(elem.style.width){return elem.style.width;}
if(elem.currentStyle)return elem.currentStyle.width;
if(document.defaultView && document.defaultView.getComputedStyle)
{return document.defaultView.getComputedStyle(elem,"").getPropertyValue("width");}
}
function cssY(elem){//直接得到高度
if(elem.style.height){return elem.style.height;}
if(elem.currentStyle)return elem.currentStyle.height;
if(document.defaultView && document.defaultView.getComputedStyle)
{return document.defaultView.getComputedStyle(elem,"").getPropertyValue("height"); }
}
var resetCSS=function(elem,prop){
var old ={};
for (var i in prop){
old[i] =elem.style[i];
elem.style[i] = prop[i];
}
return old;
}
var restoreCSS=function(elem,prop){
for (var i in prop)
{elem.style[i]=prop[i];}
}
function getWidth(elem){
if(elem.style.display!="none"){
return elem.offsetWidth || parseInt(cssX(elem));
}
var old = resetCSS(elem,{
display: '',
visibility: 'hidden',
position: 'absolute'
});
var w = elem.clientWidth || parseInt(cssX(elem));
restoreCSS(elem,old);
return w;
}
function getHeight(elem){
if(elem.style.display!="none"){
return elem.offsetWidth || parseInt(cssY(elem));
}
var old = resetCSS(elem,{
display: '',
visibility: 'hidden',
position: 'absolute'
});
var w = elem.clientHeight || parseInt(cssY(elem));
restoreCSS(elem,old);
return w;
}
function autoimg(obj,width,height)
{
if(obj==undefined)
{ //得到觸發事件的元素
var evt= window.event;
var obj = evt.target||evt.srcElement;
}
width=width||getWidth(obj.parentElement); //若不指定寬度則得到其父元素的寬度
height=height||getHeight(obj.parentElement);
myImage = new Image();
myImage.src = obj.src;
if (myImage.width>0 && myImage.height>0)
{
var rate = 1;
if (myImage.width>width || myImage.height>height)
{
if (width/myImage.width<height/myImage.height)
{
rate = width/myImage.width;
}
else
{
rate = height/myImage.height;
}
}
obj.width = myImage.width*rate;
obj.height = myImage.height*rate;
}
}
生活常識
- 騷年，年底大掃除如何清理最霸道的廚房油污你..(12-22)
- 吃了幾十年火鍋，竟然才發現吃錯了(12-17)
- 安徽職工生育保險津貼如何領取？流產津貼如何..(12-05)
- 十萬個為什么？女性私處為什么會變黑(11-19)
- 人體內全部秘密，再不對自己好點就晚了(11-16)
創意無限
- 英國“神奇凝膠”緩解“皮肉之苦”(08-03)
- 德攝影師制作奇妙光涂鴉頗似壯觀煙花(組圖)(05-10)
- 英國女學生用立體涂鴉畫出“隱形車”(圖)(05-10)
- 創意到實用！國外知名地鐵站設計欣賞(04-13)
- 工業革命時代的粗曠！起重機造型吊燈(04-13)
源碼資料
- javascript實現網頁跳轉的方法(10-29)
- CSS+DIV常用小代碼的收集(10-07)
- 自動判斷手機、平板與電腦訪問不同網址頁面的..(09-30)
- 最簡單實用的鼠標移到圖片上變成另外圖片的效..(09-26)
- VB鼠標離開窗體時就執行某個代碼如何實現？(06-30)
資源中心
- 原文：為什么這么多人黑周星馳(全文)(09-12)
- 紅藍3D眼鏡測試演示3D圖片-風景、人物及其他2..(02-06)
- 紅藍3D眼鏡測試演示3D圖片及美女3D視頻-美女篇..(02-06)
- “東亞病夫”是中國人自已罵自已的,非洋人(08-06)
- eWebEditor不支持IE8、IE7、火狐、傲游的解決..(06-13)
