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

Thread: Image resize based on browser window size

  1. #1
    Join Date
    Nov 2010
    Posts
    11

    Image resize based on browser window size

    HI everyone!

    Many thanks to all that have helped me in the past! I am not sure which thread this would belong to (as I don't know which approach - Javascript, etc) is best for this.

    I am looking to have an image within a <div> that I would like to resize based on the browser window size. I would design the page for use in 1024 by 768 resolutions, and have the image scale down if the browser window is smaller (i.e. using a lower resolution).

    I would appreciate any guidance on the best way to achieve this.

    Sincerely,
    Webapple

  2. #2
    Join Date
    Jun 2009
    Location
    NY
    Posts
    96
    You don't really need JS or any other dynamic prog. languages.

    Checkout this Website:
    http://css-tricks.com/perfect-full-p...kground-image/

    This should help.

  3. #3
    Join Date
    Nov 2010
    Posts
    11
    Hi Webwarrior,

    Thank you for your reply! The page you suggest is helpful; however, I am running into a few problems with the code and my image, and I am not sure why. They use an image with a 1024 by 683 resolution and the page works fine. My image is 1600 by 1100 (I want to scale down rather than up, so the quality at high resolutions is good), but when I change the code to use my image, it does not scale down, nor display properly.

    I tried to change the code in the CSS for the width and height of the div, but I'm not sure if that is the reason for the issue.

    Also, my background is a .png, could that cause issues too? And for some reason, the background shows up in firefox, but not in IE 8.

    Many many thanks in advance!!

    WebApple

  4. #4
    Join Date
    Jun 2009
    Location
    NY
    Posts
    96
    It doesn't really matter whether it is a png, gif, or jpeg image. Unfortunately, I don't have IE 8 on this machine. I could check it later though.
    Could you provide a link to your Website?

  5. #5
    Join Date
    Nov 2010
    Posts
    11
    Hi Webwarrior,

    WOW that was quick! I unfortunately don't have a site up yet, and am working on the files locally. Could I provide you with a .zip of the files?

    Thanks again!
    WebApple

  6. #6
    Join Date
    Jun 2009
    Location
    NY
    Posts
    96
    Yeah sure.

  7. #7
    Join Date
    Nov 2010
    Posts
    11
    Hi Webwarrior,

    Zip file is attached. Many thanks for your attention, and help. I can't express how appreciateive I am!

    Webapple
    Attached Files Attached Files

  8. #8
    Join Date
    Jun 2009
    Location
    NY
    Posts
    96
    I am having trouble extracting your zip file. Is it in the standard format? It doesn't open in neither MAC, nor Windows.

  9. #9
    Join Date
    Nov 2010
    Posts
    11
    Hi webwarrior,

    Thanks for the reply and sorry you had trouble with the .zip. I am attaching another version, where I changed the settings to be more compatible with legacy formats. I hope this helps!

    Thanks again!
    Webapple
    Attached Files Attached Files

  10. #10
    Join Date
    Jun 2009
    Location
    NY
    Posts
    96
    You can play around with the #bg div's position. For example:
    #bg div {
    height:200%;
    left:-30%; /* -50% was changed to -30% */
    position:absolute;
    top:-50%;
    width:200%;
    }
    makes it fit better on my screen.

    You might also need to make the .box background-color: transparent if you don't want the box's white background blocking the image.

    From what I understand, you are trying to fit the text inside the shaded frame of the bg image, correct. If so, then this technique might not help you much. Its goal is to fit the bg image into the available screen space and it will scale differently on different screen sizes. This makes it extremely difficult to control the exact position where your text is going to appear.
    You should consider using "fixed" design layout. That way you will be able to calculate the exact position where your text will appear. Your Web page looks like a good candidate for this type of layout.

    Sorry I couldn't be of more help, but changing the approach here is the only thing I can recommend.

  11. #11
    Join Date
    Nov 2010
    Posts
    11
    Hi again Webwarrior,

    Once again, many thanks for all your help! And you are certainly offering me a ton of help, especially at these early stages where I want to figure out if what I am trying to accomplish is even feasible....

    You are absolutely correct about where I want to place the live content of the site. I was hoping that I can also scale the div container (placed over that white area) that would hold the live content, but from your comments is this impossible? Would I be able to scale the div and the background together so the live content stays approximately where I want it?

    I want to offer a page that works with most resolutions, and looks sharp (hence I don't want to work with scaling up the image, but rather scaling down). Given what you have seen, do you think there is an approach that I can use to accomplish this?

    Many many thanks!!
    Webapple

  12. #12
    Join Date
    Nov 2010
    Posts
    11
    Webwarrior,

    I forgot to mention that I also want the image to stay attached ot the left pane of the browser, so the area where the logo is remains attached to the left side.

    Thanks!!

  13. #13
    Join Date
    Jun 2009
    Location
    NY
    Posts
    96
    I don't like using the word "impossible" for something I myself cannot do, LOL. However, I will say that using the background image this way for "liquid" design layout probably is. Like I previously mentioned, the image will not consistently align with content (i.e. it might appear further away/closer) on different screen resolutions. Since you want to place page's content in that particular spot, you will likely need to use precise positioning and % values depend on screen size thus making them poor candidates for the job. Why not make your Web page fixed width (960px perhaps?), center align it, and then use CSS to place your content in the right spot?

  14. #14
    Join Date
    Nov 2010
    Posts
    11
    Hi webwarrior,

    I figured out some code that seems to work a bit, just have to play with the numbers a bit. I wanted to thank you for all your help!

    I want to put a background image in the body of the page, to show behind the images you saw on the page (they have transparencies in them). I placed the background image info (url,etc) in the CSS, but for some reason it doesn't show up. I also set the backgrounds of the divs to transparent as you had suggested, but still nothing...

    Any thoughts?

    Many many thanks!!
    Webapple

  15. #15
    Join Date
    Jun 2009
    Location
    NY
    Posts
    96
    Sure thing glad I helped a bit.
    I am not sure it's a good idea to use it as a background image for the <body. it won't scale so well and might not look too good. I can't help you too much since I can't see your code. Why not upload it to a test server and post a link?

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