Forums

rudifer

I'm having some issues trying to force divs/website to Horizontally scroll, without the page having a fixed width. Also, there is an image that adjusts its size along with browser resize.

For example, this is where I am at, but this is what I would like to achieve.

Since the images would be uploaded by the user, I can't set a fixed width and since there are different browser sizes, I would like to maintain image size flexibility.

I can't seem to get these images/divs to stay side-by-side, while maintaining their flexibility.

Any help would be greatly appreciated,
Thanks

Mottie

You're probably going to need to use some javascript to adjust the page width. How are you planning on resizing the images? I'm guessing maintain the aspect ratio, but make them fit the page?

Mottie

Here is a demo I put together, it will always maintain the image aspect ratio (no stretching)

var adjustSize = function(){
    var total = 10, // include extra width padding here
        win = $(window),
        winW = win.width(),
        // subtract scroll bar height to prevent vertical scrollbar
        winH = win.height() - 15;
    $('#container img').each(function(){
        var $t = $(this),
            r = $t.width()/$t.height(); // image aspect ratio
            // set image size, but maintain aspect ratio
            worh = (r > 1) ?
                { width : winW,  height: winW/r, maxHeight: winH, maxWidth: winH*r } :
                { height : winH, width : winH*r, maxWidth: winW, maxHeight: winW/r };
        $t.css(worh);
        // add up total width for body size
        total += $t.width();
    });
    $('body').width(total);
};

// run script after all the images have loaded & on window resize
$(window)
    .load(function(){ adjustSize(); })
    .resize(function(){ adjustSize(); });

rudifer

Thanks mottie,
that's pretty close, but is there a way to maintain uniform height, even though the images have different width?
Previously I was looking into setting the images to cover 100% width within a div, and have the div fluid resize, but that doesn't seem to be the way to go.

Mottie

Ok, try this... max height is maintained.

rudifer

That is it. Is there a way to maintain the image's aspect ratio when the browser window is resized horizontally? I updated that link with a few different images, and it seems these images shrink in width but not height when the browser window becomes smaller

Mottie

Hmmm, ok maybe this is better.... hehe gotta love experimenting ;)

rudifer

HAHA yeah this is a process and a half. the problem with this last one is the images appear a bit stretched vertically, while compacted horizontally. is there a workaround to make it maintain its proportions?

Mottie

The last version should be maintaining the aspect ratio while keeping all of the images aligned horizontally. If the images you substitute in are stretching, could you update the demo with the different image sizes?

rudifer

yeah for sure. updated

rudifer

i think the problem here is it's impossible to give all images the same aspect ratio, while maintaining a dynamic height + width, when they aren't all the same size. if we establish a max height (800px) and make sure all images are in fact of 800px+ height, is there a way to maintain the aspect ratio for all images as the height will be the same throughout, yet the width will be different?

i don't know if that makes sense, but to add to it, so if the user's browser window is 600px tall, the images won't surpass 600px height(will maintain uniform height) which is from top of the screen to bottom of screen, yet if the user's browser window is 1000px, the images will stretch to a maximum of 800px height, maintain its uniform height throughout, without touching the bottom of the screen - but they will be all lined up properly.

twisted. i realized that this guy did it and it's eating at me. if i can't wing this than i'll just change the design up. would love and be more than grateful for the extra help

rudifer

...and so that the image doesn't shrink weird, could do away with maxwidth, and focus on height to maintain the image's aspect ratio. equal heights, never more than browser size, while maintaining aspect ratio.

Mottie

To me, the last demo I made does do what you are asking. So maybe the different sized images you are using is causing some problems that I am not aware of, so it would help if you shared a demo or at least update the demo with the same image sizes you are using... I can't work out a problem if I can't see what's wrong.

rudifer

oh sorry i thought i had updated it - http://jsfiddle.net/5TETn/6/
a good example of what i mean by the shrinking would be the 3rd image down, didn't maintain its aspect ratio compared to its original.

so that's what i was thinking, if the image width was independent from browser width, but height was to remain uniform and relative to browser window, that it would work. i definitely don't know how to pull that one off though

Mottie

Ok, I got rid of all the unnecessary junk... it should work now!

rudifer

Brilliant! You're a life saver!!

rudifer

one more question, how or where would i go about adding image border to the total width of page? the number of images is unknown, but 1px left and right of each image.

Mottie

In the demo, adjust the value of this line

total = 10, // include extra width padding here

to the number of images x 2 to add some extra width so the images don't wrap. The 10 there is pretty much arbitrary. To add the 1 px border, just add it to the css:

#container img {
    float: left;
    border: 1px solid #000; /* or whatever color you want */
}

rudifer

oh awesome! didn't see that comment on total=... perfect!

emilyflannery

A year later.... This is great. Instead of the images resizing based on full width/height of browser window, how could you set a height of the image container as a percentage of page height, and have the images resize within that container?

treehouse : what would you like to learn today?

Forums

Force divs/website to Horizontally scroll without fixed width