...

View Full Version : Making image fit screen size automatically



thegreatpursuit
08-07-2010, 08:06 PM
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.

abduraooft
08-07-2010, 09:16 PM
How about setting a width and height in % units?

thegreatpursuit
08-07-2010, 09:19 PM
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.

tfburges
08-07-2010, 11:33 PM
Percentages are always relative to the size of the container; i.e., if the window shrinks/grows, so will the image.

Taraes
08-08-2010, 08:06 AM
Try


<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:


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

Major Payne
08-08-2010, 10:02 AM
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 (http://visuallightbox.com/) 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 (http://www.stunicholls.com/gallery/index.html).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum