Trouble with images being responsive

**nitsud08** · 08-29-2012 10:32 PM

I am having a couple issues on this portfolio site that I am in the middle of making.

http://jdwdb.com/seb/
This is the site that I am working on. If you click on the menu on the left, images should pop up horizontally. As you can see, I have tried a couple different methods. I need the photographs to grow/shrink according to the size of the browser window.

www.tomhoops.com
I am using this site as a reference. I love how fluid the images shift and I am trying to recreate that effect. I am even fine with media queries, even though the fluid responsiveness is a lot more attractive.

Any help would be very much appreciated!

thanks!!!

**LukieB** · 08-30-2012 05:19 AM

"I need the photographs to grow/shrink according to the size of the browser window."

You could do something like this, if ur using PHP..

PHP Code:


$PictureWidth = 100 / $numberOfPictures.'%';

**jedaisoul** · 09-01-2012 02:50 PM

You can do that by setting:

position=fixed;
top=0;
bottom=0;
left=0;
right=0;

I've used zeros, which should fill the parent div. Trouble is, it does not keep the aspect ratio correct, which looks odd. To expand/contract AND keep the aspect ratio you need to use JavaScript, which I cannot help with. I just use a fixed size graphic with a low z-index (e.g. -1) and attach it to one corner. E.g.

position:fixed;
left=170px; /* allow for menu bar */
top=80px; /* allow for header */
z-index=-1; /* hide overflow to right and or below */

**rtrethewey** · 09-02-2012 10:22 PM

Use a percentage ('%') for the CSS height setting for #photostrip instead of the fixed setting of '830px'. That way it will be a percentage of it's container (probably the window/viewport - I didn't look that closely), and the images in your <ul> should resize correspondingly since they're set to '100%'.

Note that you should correct the syntax on the page. The values for several attributes on your HTML elements are terminated with a semi-colon (';'). HTML attributes should either have no terminator, or (best practice) enclosed in single or double quotation marks. Good luck!

**jedaisoul** · 09-03-2012 01:14 AM

Originally Posted by rtrethewey

Use a percentage ('%') for the CSS height setting for #photostrip instead of the fixed setting of '830px'. That way it will be a percentage of it's container (probably the window/viewport - I didn't look that closely), and the images in your <ul> should resize correspondingly since they're set to '100%'.

Making the height a percentage will not preserve the aspect ratio of the pictures. The easiest way to do that is to use a div as a re-sizeable view port onto a static picture that matches the largest size that is required. E.g. to fill an HD screen that has a 170 pixel side menu, a 150 pixel top bar and a 90 pixel footer you need a 1750x840 picture. Set overflow=hidden or set the z-index to hide the overflow, and the viewable area can expand and contract without affecting the aspect ratio of the picture.

Note: When using large pictures, it is particularly important to optimize them. Unoptimized, a picture that size can be 400KBytes+. That can often be optiimized down to 100 to 150 KBytes (or less).

**rtrethewey** · 09-03-2012 11:03 AM

It was obviously too much to hope that my suggestion would fix everything, I suppose. All I had in mind was something simple like this:

Code:

<!DOCTYPE html>
<head>
<title>Responsive Image Height</title>
<style type="text/css">
 html,body { width:100&#37;; height:100%; }
 #container { width:90%; height:90%; margin:4% auto; }
 .slide { height:100%; }
</style>
</head>
<body>
<div id="container">
<img src="http://jdwdb.com/seb/wp-content/uploads/2012/08/MG_6736_rgb-copy.jpg" class="slide" alt="" />
</div>
</body>
</html>

**jedaisoul** · 09-03-2012 03:51 PM

An example of what I'm suggesting is here: http://www.emberwebsites.co.uk/

Select the "Full" and "Small" options under "Graphics Demo", and increase and decrease the window to see the effect.

Thread: Trouble with images being responsive

Thread Tools

Display

Trouble with images being responsive

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions