调整照片浏览器高度调整大小并最大限度地不拉伸？

问题描述：

结帐我谈论这里的页面：http://willy-ward.com/fashion 调整照片浏览器高度调整大小并最大限度地不拉伸？

基本上，我无法弄清楚如何将照片留在他们目前的宽高比当用户改变他们的浏览器，然后将其最大化。

我一直在玩CSS，但我似乎永远也看不清楚。我相信这很容易。只需查看该URL并查看被调整大小的浏览器窗口如何影响照片。身高100％和宽度自动似乎不能正常工作？

另一个问题是本页图片下方多余的空白，尽管下面没有元素。我有点困惑。

对不起，如果这个问题没有雄辩的话，我的英语会降低一点，因为我越来越累。

感谢您的帮助！

这是我目前拥有的代码：

 jQuery(document).ready(function() { 
      jQuery(".photoStrip").width(0); 
      jQuery(".photoContainer img").load(function(){ 
       jQuery(this).css({'visibility':'hidden','display':'block'}); 
       var newWidth = jQuery(this).width(); 
       jQuery(this).css({'visibility':'visible','display':'none'}); 
       jQuery(".photoStrip").width(function(index, width){ 
        return width + newWidth + 20; 
       }); 
       jQuery(this).parent().css({ 
        'width' : newWidth 
       });    
       jQuery(this).fadeIn(800); 
      }).each(function(){ 
       if(this.complete) jQuery(this).trigger("load"); 
      }); 

      jQuery(window).bind("resize", function(){ 
       jQuery(".photoStrip").width(0); 
       jQuery(".photoContainer").each(function(){ 
        var newWidth = jQuery("img", this).width(); 
        jQuery(this).css({ 
         'width' : newWidth 
        }); 
        jQuery(".photoStrip").width(function(index, width){ 
         return width + newWidth + 20; 
        }); 
       });    
      }); 
     });

你需要显示在浏览器窗口中的图像在同一行和大小的所有图像大小 – 2012-08-10 07:04:25

是啊这就是我想要做的伙伴 – 2012-08-10 07:39:49

最好不要重复相同的问题，请改善你的现有的问题。否则，我们关闭并删除它们，这会让您更近一步，无法提出新问题。谢谢。 – Kev 2012-08-10 23:43:33

答

我做了一个快速的jsfiddle什么，我认为是你的问题的解决方案。我希望它有帮助。 http://jsfiddle.net/QfHF6/

<html> 
    <head> 
    <title>Image</title> 

    <script type="text/javascript"> 

    function resizeImage() 
    { 
     var window_height = document.body.clientHeight 
     var window_width = document.body.clientWidth 
     var image_width = document.images[0].width 
     var image_height = document.images[0].height 
     var height_ratio = image_height/window_height 
     var width_ratio = image_width/window_width 
     if (height_ratio > width_ratio) 
     { 
      document.images[0].style.width = "auto" 
      document.images[0].style.height = "100%" 
     } 
     else 
     { 
      document.images[0].style.width = "100%" 
      document.images[0].style.height = "auto" 
     } 
    } 
    </script> 

    <body onresize="resizeImage()"> 
    <center><img onload="resizeImage()" margin="0" border="0" src="http://upload.wikimedia.org/wikipedia/en/2/2b/1_WTC_rendering.jpg"></center> 
    </body> 


    </head> 
    </html>

当窗口最大化时，它似乎没有回到正确的宽高比。 :( – 2012-08-10 07:32:21

答

说完看着例子URI我得到这个：

HTML

<html> 
<head> 
<title>Image</title> 

<body> 
    <div class="wrapper"> 
     <img src="http://upload.wikimedia.org/wikipedia/en/2/2b/1_WTC_rendering.jpg"> 
    </div> 
</body> 


</head> 
</html>

CSS

html, body { 
    height: 100%; 
} 
.wrapper { 
    height: 100%; 
    padding-right: 20px; 
    display: inline; 
    white-space: nowrap;  
} 
img { 
    max-width: 100%; 
    width: auto; 
    height: 100%; 
}

这是否维利沃德网站没有确切的事情。 .wrapper高度取决于其父项。在这种情况下，这是

调整照片浏览器高度调整大小并最大限度地不拉伸？

相关推荐