熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

jquery實現圖片等比例縮放

2022-06-13   來源: JSP教程 

  用原生的JavaScript實現的圖片等比例縮放maxwidth和maxheight在ie中不兼容問題今天用jQuery實現了這些問題
jQuery部分代碼
<script type="text/javascript">
$(document)ready(function(){
var maxWidth=$("imgBox")width();
$("img")each(function(){
if(!$supportstyle&&$browsermsie&&($browserversion==)){ //判定浏覽器為ie的時候
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部分代碼
<style type="text/css">
body{ margin:; padding:;}
box{ width:px; margin: auto;}
imgBox{ background:#CCCCCC;*display:tablecell; width:px; margin:px auto; *fontsize:px; lineheight:px; textalign:center; verticalalign:middle; padding:px;}
img{ border: none; maxwidth:px; overflow:hidden; verticalalign:middle;}
</style>

html代碼

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


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20016.html
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.