0

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

2 回答 2

0

查看了示例 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-10T11:52:59.777 回答
0

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