dcsimg
www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: size image to fit window (without cropping or changing ratio)

  1. #1
    Join Date
    Jun 2004
    Posts
    133

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

  2. #2
    Impossible (eat cake and have cake much?,

    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.

  3. #3
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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?
    Last edited by Kor; 10-19-2011 at 09:08 AM.

  4. #4
    Join Date
    Jun 2004
    Posts
    133
    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:

    http://manos.malihu.gr/tuts/sideways...clickmode.html
    (change the image view mode from "full" to "fit")

    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.

  5. #5
    Join Date
    Jun 2004
    Posts
    133
    Here's another example of somebody doing the "impossible."

    http://flight-fancy.blogspot.com/201...al-part-1.html

    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.

  6. #6
    Those 2 links you have posted contain some stuff which is extremely easy to do.

    size image to fit window (without cropping or changing ratio)
    This IS impossible (or wrong words). If you educate yourself a little bit more, you'll understand that.


    My first reply contains some clues for you. Good luck!
    Last edited by touch_the_sky1; 10-29-2011 at 11:51 AM.

  7. #7
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    I have to say that youre making about as much sense as using a chocolate coffee pot in the desert.

    Do you mean the small images to the left appear big to the right? if so, the images on the left are "Thumbnails" and the images on the right which have to load, theyre the full blown image The big image here http://manos.malihu.gr/tuts/imgs/spa...ucernarium.jpg is represented by a thumb here http://manos.malihu.gr/tuts/imgs/spa...rium_thumb.jpg

    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 11:51 AM.

  8. #8
    Join Date
    Jun 2004
    Posts
    133
    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.

  9. #9
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    The image properties are
    1,680 x 1,050 pixels @ 24 bits per pixel and in the site code it
    has
    <img src="imgs/space/Universe_and_planets_digital_art_wallpaper_lucernarium.jpg" title="Supremus Lucernarium" id="bgimg" style="margin-left: 0px; display: inline; width: 1343px; height: 839px; margin-top: -212.5px"/>
    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.

  10. #10
    Join Date
    Jun 2004
    Posts
    133
    Quote Originally Posted by JunkMale View Post
    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.

  11. #11
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    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.

  12. #12
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    I'M also INTP and swing to INTJ sometimes and have been known to be SNTP at times.

    God IM mixed up.

  13. #13
    Join Date
    Jun 2004
    Posts
    133
    Quote Originally Posted by JunkMale View Post
    PRESTO! we have the answer.
    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.

  14. #14
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    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.

  15. #15
    Join Date
    Jun 2004
    Posts
    133
    Quote Originally Posted by JunkMale View Post
    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.

    Quote Originally Posted by JunkMale View Post
    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?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles