jQuery實現的圖片尺寸自適應程式碼例項

antzone發表於2017-03-20
jQuery

實現圖片尺寸自適應這樣的功能需求是很多的，很為很多時候容器的尺寸和圖片的尺寸並不是恰恰吻合，或者說在尺寸的比例上不是吻合的，所以需要對圖片的尺寸進行一下處理，當然不能太暴力，不能夠直接固定圖片的尺寸，這樣很可能會導致圖片變型失真，下面就通過程式碼例項介紹一下如何實現圖片尺寸的自適應效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.thumbnail{
  overflow:hidden;
  width:400px;
  height:240px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(function(){ 
  $('#content div.thumbnail img').each(function(){ 
    var x=400;
    var y=240;
    var w=$(this).width(),h=$(this).height();
    if(w>x){
      var w_original=w,h_original=h; 
      h=h*(x/w);
      w=x;
      if(h<y){
        w=w_original*(y/h_original);
        h=y;
      } 
    } 
    $(this).attr({width:w,height:h}); 
  }); 
}); 
</script> 
</head>
<body>
<div id="content">
<div class="thumbnail"><img src="mytest/demo/antzone.jpg"/></div>
</div>
</body>
</html>

相關文章