- This topic is empty.
-
AuthorPosts
-
October 27, 2011 at 10:28 pm #34941
rudifer
MemberI’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,
ThanksOctober 28, 2011 at 6:34 am #89815Mottie
MemberYou’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 #89817Mottie
MemberHere 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 #89852rudifer
MemberThanks 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 #89853October 28, 2011 at 4:50 pm #89855rudifer
MemberThat 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 #89859Mottie
MemberHmmm, ok maybe this is better…. hehe gotta love experimenting ;)
October 28, 2011 at 6:37 pm #89865rudifer
MemberHAHA 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 #89866Mottie
MemberThe 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 #89869rudifer
Memberyeah for sure. updated
November 1, 2011 at 6:25 pm #90025rudifer
Memberi 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 #90028rudifer
Member…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 #90030Mottie
MemberTo 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 #90036rudifer
Memberoh 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 #90057Mottie
MemberOk, 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
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.