快捷導(dǎo)航

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

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

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

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