[Solved] Force divs/website to Horizontally scroll without fixed width

[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!

Edit: updated 1/14/2014 to use placekitten images in the demo ;P

[Author]

Posts