图像调整大小以适应屏幕

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/)

Answer 2

尝试使用jQuery-Backgrounder插件.您可以调整它来做您需要的事情.这是一个例子:

<script src="jquery.backgrounder.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
  $(function() {
    $('#my_background').backgrounder({element : 'body'});
  });
</script>

[...]

<div id="my_background"><img src="birthday.jpg" alt="Birthday party" /></div>

Answer 3

对我来说看起来不错，但我建议将调整大小函数附加到 jQuery 的窗口调整大小事件处理程序。然后图像将随着页面拉伸和收缩。