在调整大小和最大化时将照片调整为浏览器高度而不拉伸？答案

【问题标题】：Adjusting Photos to Browser Height on resize and maximize without stretching?在调整大小和最大化时将照片调整为浏览器高度而不拉伸？
【发布时间】：2012-08-10 19:52:59
【问题描述】：

在这里查看我正在谈论的页面：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;
                    });
                });              
             });
        });

【问题讨论】：

您需要在同一行中显示所有图像，并在浏览器窗口大小中显示图像的大小
是的，这就是我想要做的，伙计
最好不要重复相同的问题，请改进您现有的问题。否则我们将关闭并删除它们，这将使您更接近无法提出新问题。谢谢。

标签： html css image resize

【解决方案1】：

我用我认为可以解决您的问题的方法做了一个快速的 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>

【讨论】：

在最大化窗口时似乎没有回到正确的纵横比。 :(

【解决方案2】：

查看了示例 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%;   
}

与 Willy Ward 网站所做的完全相同。 .wrapper 高度取决于其父级。在这种情况下是

【讨论】：