調整照片瀏覽器高度調整大小並最大限度地不拉伸？

結帳我談論這裏的頁面：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 Brian Lewis

你需要顯示在瀏覽器窗口中的圖像在同一行和大小的所有圖像大小 – 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:11:03 MNilson

當窗口最大化時，它似乎沒有回到正確的寬高比。 :( – 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高度取決於其父項。在這種情況下，這是

來源

2012-08-10 11:52:59 freeMagee

調整照片瀏覽器高度調整大小並最大限度地不拉伸？

回答

相關問題