欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2008年12月01日 19:57:07   作者:  
本例子在在 ff 2.0/ ie6 / ie7 中測(cè)試通過。但在 opera 8.5 cn中沒有通過。希望大家測(cè)試。
復(fù)制代碼 代碼如下:

<!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>圖片自動(dòng)等比例縮小且垂直居中-www.dbjr.com.cn </title>
<!--[if lte IE 6]>
<script type="text/javascript" language="javascript">
function imgFix() {
//定義要限制的圖片寬高,這個(gè)寬高要同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)文章

  • bootstrap時(shí)間控件daterangepicker使用方法及各種小bug修復(fù)

    bootstrap時(shí)間控件daterangepicker使用方法及各種小bug修復(fù)

    這篇文章主要介紹了bootstrap時(shí)間控件daterangepicker使用方法,及各種小bug修復(fù),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-10-10
  • 微信小程序 如何獲取網(wǎng)絡(luò)狀態(tài)

    微信小程序 如何獲取網(wǎng)絡(luò)狀態(tài)

    這篇文章主要介紹了微信小程序 如何獲取網(wǎng)絡(luò)狀態(tài),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-07-07
  • TypeScript中的函數(shù)

    TypeScript中的函數(shù)

    這篇文章主要介紹了TypeScript中的函數(shù),一般JavaScript中的函數(shù)定義常用的有使用function關(guān)鍵字聲明函數(shù)、使用字面量方式聲明函數(shù)、使用箭頭函數(shù)聲明函數(shù)等幾種函數(shù),下面我們大家就一起進(jìn)入文章了解這些函數(shù)的具體定義吧,需要的朋友可以參考一下
    2021-12-12
  • 微信小程序登錄session的使用

    微信小程序登錄session的使用

    這篇文章主要介紹了微信小程序登錄session的使用,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-03-03
  • 使用Echarts繪制一個(gè)多組折線圖

    使用Echarts繪制一個(gè)多組折線圖

    這篇文章主要給大家介紹了關(guān)于使用Echarts繪制一個(gè)多組折線圖的相關(guān)資料,Echarts是一個(gè)功能強(qiáng)大的可視化庫,可以用來繪制各種類型的圖表,包括多組折線圖,需要的朋友可以參考下
    2023-09-09
  • bootstrap fileinput 上傳插件的基礎(chǔ)使用

    bootstrap fileinput 上傳插件的基礎(chǔ)使用

    這篇文章主要介紹了bootstrap fileinput 上傳插件基礎(chǔ)使用,重點(diǎn)是把界面做得更加友好,更好的增加用戶體驗(yàn)。對(duì)bootstrap fileinput知識(shí)感興趣的朋友通過本文一起學(xué)習(xí)吧
    2017-02-02
  • JavaScript動(dòng)態(tài)改變HTML頁面元素例如添加或刪除

    JavaScript動(dòng)態(tài)改變HTML頁面元素例如添加或刪除

    HTML頁面元素可以通過js動(dòng)態(tài)改變,比如可以向HTML中添加元素或刪除某個(gè)元素,下面為示例代碼,感興趣的朋友不要錯(cuò)過
    2014-08-08
  • uniapp微信小程序:key失效的解決方法

    uniapp微信小程序:key失效的解決方法

    這篇文章主要介紹了uniapp微信小程序:key失效的解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-01-01
  • 如何在javascript 中使用 xmlHttpRequest 發(fā)送 POST 請(qǐng)求

    如何在javascript 中使用 xmlHttpRequest 發(fā)送 POST

    本文將通過不同的示例解釋如何使用JavaScript代碼在AJAX編程中發(fā)送 XMLHttpRequest post 請(qǐng)求,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2023-07-07

最新評(píng)論