Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Making image fit screen size automatically

    Hi,

    I'm currently designing this website:

    www.carmelalopez.com

    and I'm trying to get the images on the left to fit the size of the browser screen on the right when you click on them. The images themselves are huge, so I'd like some kind of code that resizes the images to fit the size of the visitor's screen, which will vary from user to user.

    This might not be an HTML question (maybe CSS), but any guidance in the right direction would be greatly appreciated.

    Thank you.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    How about setting a width and height in % units?
    Last edited by abduraooft; 08-07-2010 at 08:30 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    How about setting a width in % units?
    But does this adjust to the user's screen, or is it an absolute measurement? I need way to resize the pics to fit the user's browser.

  • #4
    Regular Coder
    Join Date
    May 2009
    Posts
    425
    Thanks
    3
    Thanked 62 Times in 61 Posts
    Percentages are always relative to the size of the container; i.e., if the window shrinks/grows, so will the image.

  • #5
    New Coder
    Join Date
    Aug 2010
    Location
    Oregon
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try

    Code:
    <img src="images/imagename.jpg" style="width: 100%" />
    It will make the image grow or shrink depending on the window. Can also lay it out in a css format and give it a class instead if you have alot of parameters for them besides just the width. So you could just do:

    Code:
    <img src="images/imagename.jpg" class="classname" />

  • #6
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    831
    Thanks
    10
    Thanked 79 Times in 77 Posts
    Quote Originally Posted by thegreatpursuit View Post
    Hi,

    I'm currently designing this website:

    www.carmelalopez.com

    and I'm trying to get the images on the left to fit the size of the browser screen on the right when you click on them. The images themselves are huge, so I'd like some kind of code that resizes the images to fit the size of the visitor's screen, which will vary from user to user.

    This might not be an HTML question (maybe CSS), but any guidance in the right direction would be greatly appreciated.

    Thank you.
    I would suggest using thumbnails for the basic images. That one image is humongous and will be extremely slow loading for some people. They will no doubt click away from your site. If the full size of a larger image is not needed except for viewing, I suggest that you resize all images you want to use as a larger image to view. Then, use Lightbox 2 or similar to provide a nice mouse over of the thumbnail images where the larger ones are shown without using up real estate on the page. You might find something useful at Stu's site.
    Last edited by Major Payne; 08-08-2010 at 09:05 AM.
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

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