size image to fit window (without cropping or changing ratio)
I'm trying to size an image to fit the browser window. It will be the only thing in the frame, so it doesn't matter if it's the background or not. I've found quite a few ways to have the image automatically resize itself where it either gets cropped off or changes ratio to stretch, but I've not found anything where it'll keep the full image and ratio and just have bars top and bottom or sides. Can anybody help? Thanks.
Think about it - you can't assume someone will be using certain screen resolution, device (window size), etc. Your best bet is to resize width to fit and let the height flow naturally - you keep the aspect ratio. If the image height exceeds the size of your viewport, then be it. Squeezing both dimensions of an image to match the window size is bad.
size image to fit window (without cropping or changing ratio)
Impossible. To size an image in order to fit the window means to adapt the size AND the ratio of an image to the size AND the ratio of the window. There are many ratio of the displays in use these days. Don't mention that the user might resize and/or change the ratio of the browser's window at will.
The only way could be, with some conditions. on using a vectorial graphical plug-in/add-on, such as Flash or Silverlights. But that does not implies an image. The product should be designed entirely as vectorial, not imported as a bitmap image because the subsequent distortions will be horrible. Yet, even in this case, the change of the ratio is a must. It is illogical to say that you want to accord two geometrical surfaces at the same size and ratio without changing the size AND the ratio of one of them.
After all size means ratio, at the same time, isn't it?
What I meant by ratio was that if, for example, my image was twice as tall as it is wide, it would remain twice as tall as it is wide when it changed size. Here is a gallery using jquery which actually does it:
Notice that when you change the browser size, the image resizes with it, but it doesn't get cropped or stretched to a new shape. It gets bars on the edges. That is what I want, but I don't want the sliding and don't know how to edit that code.
Click an image in this tutorial. You'll get a bar of thumbnails and the main image above them will resize itself to fit your browser window without cropping or changing the aspect ratio.
I can't believe there's no tutorial anywhere on how to do something like this.
Nothing to do with resizing, they are two independent images.
FYI, most wall papers are generally just bigger than 1024 x 768 as the vast majority of PC users will use this resolution.
Last edited by JunkMale; 10-29-2011 at 10:51 AM.
We all have baggage to carry in life, unfortunately for me I always get the trolley with the wonky wheel...
Code:
Youre = {
STILL_not_getting_it:function(){
alert("YOU, the original poster / thread starter NEED to POST the code and NOT a LINK.");
},
MissingThePoint:function(msg){
alert("You're missing the point. " + msg);
}
}
Youre.STILL_not_getting_it();
I give up! Clearly I've worded something poorly, and my two examples of sites using what I was trying to describe didn't help. Obviously having an image fit the browser *exactly* without cropping or changing aspect ratio is indeed impossible. I get that. I'm aiming for the closest possible fit. Like clicking your printer settings for "best fit to page," and your image will go all the way to the edges on two sides and leave blank paper on the other two edges. If you read my first post, I said it would need to leave bars top and bottom or sides (you would just see the background in these areas). I don't know how else to word my request, I'm sorry.
which to me looks like they are sizing the images to fit a ratio. 1343 / 1680 = 0.7994
1050 * 0.7994 = 839 which means the ratio is 1:1.25 (inverse is 0.7994)
So its not magic, its someone making an image to a maximum size 1,680 x 1,050 pixels and setting the size in the browser to 1343 x 839
If you had simply viewed the "Source" of the page or looked at it through your browsers property inspector (All browsers of worth have these tools, even Opera has them) you would have found this out yourself rather than (not being rude here, its my nature to point out the obvious) made an "Donkey" of yourself my dear Ms Doe.
We all have baggage to carry in life, unfortunately for me I always get the trolley with the wonky wheel...
Code:
Youre = {
STILL_not_getting_it:function(){
alert("YOU, the original poster / thread starter NEED to POST the code and NOT a LINK.");
},
MissingThePoint:function(msg){
alert("You're missing the point. " + msg);
}
}
Youre.STILL_not_getting_it();
If you had simply viewed the "Source" of the page or looked at it through your browsers property inspector (All browsers of worth have these tools, even Opera has them) you would have found this out yourself rather than (not being rude here, its my nature to point out the obvious) made an "Donkey" of yourself my dear Ms Doe.
I did look at the source code (see in my post where I said that I "don't know how to edit that code"). I didn't completely understand it. So I came here, to a forum that I thought was for getting help, in hopes of being able to learn, possibly get a link to a tutorial to teach me. I don't see how asking questions makes me a "donkey." I'm happy for you that you apparently know everything, but I don't, and I don't think I should be ashamed to say so and try to get help learning.
Ahhh but I don't know everything its more a question of applying a bit of curiosity with mystery, a dog, van and some college geeks. PRESTO! we have the answer.
Don't worry about me, Im the local BIPOLAR-BEAR. Woof.
We all have baggage to carry in life, unfortunately for me I always get the trolley with the wonky wheel...
Code:
Youre = {
STILL_not_getting_it:function(){
alert("YOU, the original poster / thread starter NEED to POST the code and NOT a LINK.");
},
MissingThePoint:function(msg){
alert("You're missing the point. " + msg);
}
}
Youre.STILL_not_getting_it();
I'M also INTP and swing to INTJ sometimes and have been known to be SNTP at times.
God IM mixed up.
We all have baggage to carry in life, unfortunately for me I always get the trolley with the wonky wheel...
Code:
Youre = {
STILL_not_getting_it:function(){
alert("YOU, the original poster / thread starter NEED to POST the code and NOT a LINK.");
},
MissingThePoint:function(msg){
alert("You're missing the point. " + msg);
}
}
Youre.STILL_not_getting_it();
Well, I still don't have my answer, but I guess that's because I didn't know how to properly word the question. It's not an issue of thumbnails vs main images or width and height tags. It's about an image scaling itself up or down to best fit the browser window. If I set the width and height both to 100%, the aspect ratio gets messed up. I only set either width or height, some images get cropped. I don't mind having some background show on two of the sides because it doesn't fit exactly. I don't know how to word things to make this make sense. But thanks for trying to help.
Nope, This has nothing to do with the thumbnails.
Your still not getting it.
The main image is the larger image which has been scaled down to the smaller size. If you load up the web page and select image properties for the background image, it will tell you is physical size in pixels.
that is how I know that the wallpaper image is 1,680 x 1,050 pixels.
I then inspected the element in the debug tool and it highlighted the HTML line as I have displayed it showing height and width settings that are PROPORTIONAL and have been calculated using a RATIO of 1:1.25 and when you multiply the inverse of that ratio with the larger images sizes of the wallpaper, you will find that the sizes that come out are the smaller sizes.
Therefore the image has been scaled to fit the browser.
The thumbnails are smaller files and nothing to do with the larger wallpapers other than being a smaller rendered image of them.
I really don't know how to say this other than the wallpaper image has been resized by a ratio as previously stated.
We all have baggage to carry in life, unfortunately for me I always get the trolley with the wonky wheel...
Code:
Youre = {
STILL_not_getting_it:function(){
alert("YOU, the original poster / thread starter NEED to POST the code and NOT a LINK.");
},
MissingThePoint:function(msg){
alert("You're missing the point. " + msg);
}
}
Youre.STILL_not_getting_it();
The main image is the larger image which has been scaled down to the smaller size. If you load up the web page and select image properties for the background image, it will tell you is physical size in pixels.
that is how I know that the wallpaper image is 1,680 x 1,050 pixels.
I then inspected the element in the debug tool and it highlighted the HTML line as I have displayed it showing height and width settings that are PROPORTIONAL and have been calculated using a RATIO of 1:1.25 and when you multiply the inverse of that ratio with the larger images sizes of the wallpaper, you will find that the sizes that come out are the smaller sizes.
Therefore the image has been scaled to fit the browser.
Yes, I'm with you so far and understand what you're saying here.
Originally Posted by JunkMale
I really don't know how to say this other than the wallpaper image has been resized by a ratio as previously stated.
My question is, what part of the code is making this automatic ratio resizing happen?
size image to fit window (without cropping or changing ratio)
Reply With Quote
,
Originally Posted by JunkMale
Bookmarks