利用JS解決ie6不支持max-width,max-height問題的方法
更新時間：2014年01月02日 10:02:46 作者：
本篇文章主要介紹了利用JS解決ie6不支持max-width,max-height問題的方法。需要的朋友可以過來參考下，希望對大家有所幫助
今天遇到一個關(guān)于用js解決ie6不支持支持max-width,max-height的問題，剛開始用jQuery方法來實現(xiàn)，不過一直獲取不到css里面的值，如
復制代碼 代碼如下:
if($.browser.msie && $.browser.version == 6.0)
{
var maxWidth = parseInt($('.viewBigPic img').css('max-width'));
$('.viewBigPic img').each(function(){
if ($(this).width() > maxWidth)
$(this).width(maxWidth);
});
}
不知道是什么原因，獲取不到css里面的最大值，然后只能用原生的js來實現(xiàn)
js代碼如下：
復制代碼 代碼如下:
<script type='text/javascript'>
function setPhotoSize(elem, width, height) {
<!--[if IE 6]>
try{
var image=new Image();
image.src=elem.src;
if(image.width>0 && image.height>0){
var rate = (width/image.width < height/image.height)? width/image.width : height/image.height;
if(rate <= 1){
elem.width = image.width*rate;
elem.height = image.height*rate;
}
else {
elem.width = image.width;
elem.height = image.height;
}
}
}catch(e){}
<!--[endif]-->
}
</script>
部分的html代碼如下：
復制代碼 代碼如下:
<div class="viewBigBox">
<div class="viewBigPic">
<p><img id="imgid" onload="setPhotoSize(this,730,470)" src="images/viewShow.jpg" alt=""/></p>
</div>
</div>
css樣式如下：
復制代碼 代碼如下:
.viewBigBox{ border:1px solid #e3e3e3; background-color:#ffffff; padding:1px; margin-top:18px;}
.viewBigPic{ background-color:#f7f7f7;padding:20px 14px;}
.viewBigPic p{display:table-cell;width:730px; line-height:470px; overflow:hidden; vertical-align:middle; text-align:center; height:470px;*font-size:390px;}
//實現(xiàn)圖片垂直居中，主要運用了font-size與height的比例
.viewBigPic p img{ vertical-align:middle; max-height:470px; max-width:730px;}
您可能感興趣的文章:
- JS獲取scrollHeight問題想到的標準問題
- js中top、clientTop、scrollTop、offsetTop的區(qū)別 文字詳細說明版
- js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差別介紹
- js獲取height和width的方法說明
- js中top/parent/frame概述及案例應用
- js中的preventDefault與stopPropagation詳解
- js中top的作用深入剖析
- window.top[_CACHE]實現(xiàn)多個jsp頁面共享一個js對象
- JS獲取iframe中marginHeight和marginWidth屬性的方法
- JS中完美兼容各大瀏覽器的scrolltop方法
- js中不同的height, top的區(qū)別對比
相關(guān)文章
來自啟點的js,主要包括字符串的trim,cookies設(shè)置等2008-04-04
javascript實現(xiàn)PC網(wǎng)頁里的拖拽效果
這篇文章主要介紹了javascript實現(xiàn)PC網(wǎng)頁里的拖拽效果的相關(guān)資料,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了js實現(xiàn)跨域的方法,實例分析了幾種常用的javascript實現(xiàn)跨域的技巧,需要的朋友可以參考下2015-06-06
JavaScript使用面向?qū)ο髮崿F(xiàn)的拖拽功能詳解
這篇文章主要介紹了JavaScript使用面向?qū)ο髮崿F(xiàn)的拖拽功能,結(jié)合實例形式詳細分析了javascript基于面向?qū)ο蟮耐献Чδ軐崿F(xiàn)思路、原理與具體操作技巧,需要的朋友可以參考下2019-06-06
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)鼠標控制自由移動的窗口，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
easyui combobox開啟搜索自動完成功能的實例代碼
下面小編就為大家?guī)硪黄猠asyui combobox開啟搜索自動完成功能的實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
微信小程序?qū)崿F(xiàn)單個卡片左滑顯示按鈕并防止上下滑動干擾功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)單個卡片左滑顯示按鈕并防止上下滑動干擾功能，利用小程序事件處理的api，分別讀取觸摸開始，觸摸移動時，觸摸結(jié)束的X/Y坐標，根據(jù)差值來改變整個卡片的位置，具體實例代碼跟隨小編一起看看吧2019-12-12
這篇文章主要介紹了小程序分頁實踐之編寫可復用分頁組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
Javascript保存網(wǎng)頁為圖片借助于html2canvas庫實現(xiàn)
借助于html2canvas庫，把網(wǎng)頁保存為Canvas畫布，再把生成的canvas保存成圖片，下面的示例，大家可以看看2014-09-09
在 IE 中調(diào)用 javascript 打開 Excel 表
在 IE 中調(diào)用 javascript 打開 Excel 表...2006-12-12