Grow your CSS skills. Land your dream job.

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

  • # October 27, 2011 at 10:28 pm

    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

    # October 28, 2011 at 6:34 am

    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?

    # October 28, 2011 at 7:38 am

    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(); });
    # October 28, 2011 at 3:53 pm

    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.

    # October 28, 2011 at 4:25 pm

    Ok, try this… max height is maintained.

    # October 28, 2011 at 4:50 pm

    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

    # October 28, 2011 at 5:21 pm

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

    # October 28, 2011 at 6:37 pm

    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?

    # October 28, 2011 at 7:03 pm

    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?

    # October 28, 2011 at 7:42 pm

    yeah for sure. updated

    # November 1, 2011 at 6:25 pm

    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

    # November 1, 2011 at 6:45 pm

    …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.

    # November 1, 2011 at 7:20 pm

    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.

    # November 1, 2011 at 8:00 pm

    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

    # November 2, 2011 at 12:01 am

    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

Viewing 15 posts - 1 through 15 (of 26 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".