css javascript圖片自動同比例縮小并且實現(xiàn)垂直居中_DIV+CSS實例
教程Tag：暫無Tag,歡迎添加,賺取U幣!
圖片自動等比例縮小，其實假如不考慮ie6的話，用css就可以實現(xiàn)，設(shè)定img的max-width和max-height，而<img>標(biāo)簽內(nèi)不設(shè)定widht和height即可。
ie7已經(jīng)支持max-width和max-height，這是為數(shù)不多的好消息之一。 但是對于ie6及以前的版本，就只能用js來設(shè)置了。
在 ff 2.0/ ie6 / ie7 中測試通過。 opera 8.5 cn 垂直居中未通過，正在研究[貌似opera下假如只有圖片行高會失效……]。希望大家來測試。
示例代碼 [www.hl5o.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>圖片自動等比例縮小且垂直居中</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>
<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>
相關(guān)DIV+CSS實例：
- 固定div容器的寬高，圖片居中（圖片不限制大小）
- 用css制作有滾動條的居中彈出框
- 鼠標(biāo)指住(hover)變色的按鈕演示demo
- 10個很酷的涂鴉風(fēng)格國外網(wǎng)店設(shè)計展示
- jquery模擬瀏覽器滾動條效果
- 仿谷歌google的搜索框下拉提示列表效果
- JS顯示網(wǎng)頁最后更新時間
- CSS技巧：text-indent隱藏文字(以圖換字)
- CSS實例：三列自適應(yīng)等高且中列寬度自適應(yīng)
- DivCSS布局實例：很實用的圖文混排CSS列表-富有語義
- DivCSS實例：CSS菜單Flash效果用圖片模擬實現(xiàn)
- DivCSS布局實例用dldtdd來制作列表
DIV+CSS實例Rss訂閱Div+Css教程搜索
DIV+CSS實例推薦
- DivCSS布局實例：詳解建立Flash上面浮動層
- DivCSS實例：一個效果很不錯的CSS列表
- CSS實例：非常不錯的鼠標(biāo)懸停TIP效果！
- DIVCSS布局教程：應(yīng)用ul、li實現(xiàn)表格形式
- css javascript圖片自動同比例縮小并且實現(xiàn)垂直居中
- DIVCSS菜單：黑白灰?guī)в嘘幱靶Ч腃SS橫向菜單
- Div CSS實例：如何用CSS實現(xiàn)背景半透明效果
- DivCSS布局關(guān)于分辨率與100%自適應(yīng)問題的探討！
- DIV CSS布局入門示例(三)頁面頂部制作
- DIVCSS實例教程：蔚藍(lán)色的海洋漂亮的CSS縱向菜單
- 相關(guān)鏈接：
- 教程說明：
DIV+CSS實例-css javascript圖片自動同比例縮小并且實現(xiàn)垂直居中
。