0

Checkout the page I'm talking about here: http://willy-ward.com/fashion

Basically, I can't figure out how to get the pictures to stay in their current aspect ratio when the user resizes their browser and then maximize it.

I've been playing with the CSS a bit, but I can never seem to get it right. I'm sure that it's something fairly easy. Just check out that URL and see how the photos are affected by the browser window being resized. Height 100% and Width Auto do not seem to work properly?

Another issue on the side is the extra whitespace below the pictures on this page, despite there being no elements below them. I'm a little confused there.

Sorry if the question isn't eloquently put, my english degrades a bit as I get more tired.

Thanks for any help!

Here's the code I currently have:

        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;
                    });
                });              
             });
        });
3
  • You need the show all the image in same line and size of the image in browser windows size
    – user1423506
    Aug 10, 2012 at 7:04
  • Yeah that's what I'm trying to do mate Aug 10, 2012 at 7:39
  • Best not to repeat the same question, please improve your existing question instead. Otherwise we close and delete them and that will bring you one step closer to not being able to ask new questions Thanks.
    – Kev
    Aug 10, 2012 at 23:43

2 Answers 2

0

I Made a quick jsfiddle with what I think is the solution of your problem. I hope it helps. 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>​
1
  • It doesn't seem to go back to the correct aspect ratio when maximizing the window still. :( Aug 10, 2012 at 7:32
0

Having looked at the example URI I got this:

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%;   
}

Does the exact thing that the Willy Ward site does. The .wrapper height is dependent on its parent. In this case that is

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.