javascript - 图像调整大小以适合屏幕

Question

考虑到导航栏的可用空间，我创建了这段代码来调整照片/图像的大小以适应屏幕。

脚本在图像加载和导航点击时触发。

有没有人有关于如何改进并确保浏览器兼容性的建议？

HTML

$(document).ready(function(){
 $("#photo").load(function(){
  resize();
 });

 $(".navigation img").click(function(){
  var imgPath = $(this).attr("src"); 
  $("#photo").attr({ src: imgPath });
  resize();
  return false;
       });
   });

Javascript

resize = function() {

    var borderVt=150; //value based on css style. bottom bar + padding of photoContain
    var borderHz=40; //value based on css style photoContain padding

    $("#photo").css("width", "auto").css("height", "auto"); // Remove existing CSS
    $("#photo").removeAttr("width").removeAttr("height"); // Remove HTML attributes   

    var origSizeW = $("#photo").width();
    var origSizeH = $("#photo").height();
    var ratioVt=(origSizeW/origSizeH);
    var ratioHz=(origSizeH/origSizeW);
    var winW = $(window).width();
    var winH = $(window).height();
    var screenSizeW=Math.round(winW-borderHz);
    var screenSizeH=Math.round(winH-borderVt);

    if (origSizeW>=origSizeH){

     var newHeight = Math.round(screenSizeW*ratioHz);
     if (newHeight <= screenSizeH){
      $("#photo").css("width", screenSizeW); // Set new width
      $("#photo").css("height", newHeight);
      }
     else{
      $("#photo").css("height", screenSizeH);
      }

    }
    else{
    $("#photo").css("height", screenSizeH); // Set new height
    }
  };

Answer 1

我知道这个问题很老了，但这里有一个解决方案(尽管我确信 OP 也能正常工作):

这个 jQuery 插件似乎完全可以满足您的需求: http://code.google.com/p/jquery-imagefit-plugin/

如果您在 100% 高、100% 宽的元素上执行它: http://www.tutwow.com/htmlcss/quick-tip-css-100-height/

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://jquery-imagefit-plugin.googlecode.com/svn/trunk/jquery.imagefit-0.2.js"></script>
<div style="width: 100%; height: 100%">
    <img  id="h5" src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png"/>
</div>
<script>
    jQuery('#h5').bind('load', function() {
        jQuery('div').imagefit();
    });
</script>

(演示:http://jsfiddle.net/nottrobin/9Pbdz/)