jquery實現(xiàn)圖片等比例縮放以及max-width在ie中不兼容解決

更新時間：2013年03月21日 15:59:30 作者：

圖片等比例縮放在某些情況下還是比較事用的,不過max-width和max-height在ie6中不兼容問題很是郁悶，接下來使用jQuery解決這個問題，感興趣的各位可以參考下哈

上次用原生的JavaScript實現(xiàn)的圖片等比例縮放，max-width和max-height在ie6中不兼容問題，今天用jQuery實現(xiàn)了這些問題

jQuery部分代碼

 
<script type="text/javascript"> 
$(document).ready(function(){ 
var maxWidth=$(".imgBox").width(); 
$("img").each(function(){ 
if(!$.support.style&&$.browser.msie&&($.browser.version==6.0)){ //判定瀏覽器為ie6的時候 
var imgWidth=$(this).width(); 
var imgHeight=$(this).height(); 
var maxHeight = maxWidth*imgHeight/imgWidth; 
if(imgWidth>maxWidth){ 
$(this).css("width",maxWidth).css("height",maxHeight); 
} 
} 
}) 
}) 
</script> 

css部分代碼：

復(fù)制代碼代碼如下:

 
<style type="text/css"> 
body{ margin:0; padding:0;} 
.box{ width:700px; margin:0 auto;} 
.imgBox{ background:#CCCCCC;*display:table-cell; width:400px; margin:10px auto; *font-size:350px; line-height:400px; text-align:center; vertical-align:middle; padding:20px;} 
img{ border:0 none; max-width:400px; overflow:hidden; vertical-align:middle;} 
</style> 

html代碼：

復(fù)制代碼代碼如下:

 
<div class="box"> 
<div class="imgBox"> 
<img src="images/12.jpg" alt="等比例縮放圖片"/> 
</div> 
</div> 

您可能感興趣的文章:

相關(guān)文章

jQuery性能優(yōu)化的38個建議
想必大家對于jQuery這個最流行的javascript類庫都不陌生，而且只要是前端開發(fā)人員肯定或多或少的使用或者接觸過，在這篇文章中，參考了一些資料及實際使用效率，將介紹一些書寫高質(zhì)量jQuery代碼的原則，不單單會告訴你如何去書寫，也會告訴你為什么這樣書寫，希望大家會覺得有所幫助
2014-03-03
jquery radio的取值_radio的選中_radio的重置方法
下面小編就為大家?guī)硪黄猨query radio的取值_radio的選中_radio的重置方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-09-09
Jquery使用css方法改變樣式實例
這篇文章主要介紹了Jquery使用css方法改變樣式的方法,實例分析了jQuery中css方法操作樣式的技巧,需要的朋友可以參考下
2015-05-05
JQuery獲取文本框中字符長度的代碼
jquery 可以用text()方法來取得字符串，再用length 判斷長度，然后用substring()方法格式化截斷
2011-09-09
jQuery插件bgStretcher.js實現(xiàn)全屏背景特效
可以自動動態(tài)更換網(wǎng)頁背景圖片的jQuery插件bgstretcher.js，sharejs.com推薦的這個插件，可以自定義多種方式讓網(wǎng)頁背景自動切換，效果流暢，非常難得，調(diào)用代碼也非常簡單。
2015-06-06
jQuery循環(huán)遍歷子節(jié)點并獲取值的方法
這篇文章主要介紹了jQuery循環(huán)遍歷子節(jié)點并獲取值的方法,涉及jQuery節(jié)點的遍歷與屬性操作相關(guān)技巧,需要的朋友可以參考下
2016-04-04
jQuery+C#實現(xiàn)參數(shù)RSA加密傳輸功能【附j(luò)sencrypt.js下載】
這篇文章主要介紹了jQuery+C#實現(xiàn)參數(shù)RSA加密傳輸功能,結(jié)合具體實例形式分析了js使用jsencrypt.js插件前端字符數(shù)據(jù)處理傳輸及C#后臺數(shù)據(jù)轉(zhuǎn)換與RSA加密相關(guān)操作技巧,并附帶jsencrypt.js供讀者下載參考使用,需要的朋友可以參考下
2017-06-06
jQuery實現(xiàn)復(fù)選框全選/取消全選/反選及獲得選擇的值
這篇文章主要介紹了jQuery實現(xiàn)的復(fù)選框全選/取消全選/反選及獲得選擇的值,需要的朋友可以參考下
2014-06-06
jQuery使用hide方法隱藏頁面上指定元素的方法
這篇文章主要介紹了jQuery使用hide方法隱藏頁面上指定元素的方法,涉及jQuery使用hide隱藏元素的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-03-03
jquery dialog鍵盤事件代碼
jquery dialog鍵盤事件代碼，檢測回車等事件的觸發(fā)問題。
2010-08-08