Fluid images

HTML & CSS
1

Hi,
I must have fluid images on my site.
It’s working nice on home page thanks to jQuery Blueberry Slider: http://www.projektowaniestronwww.net/photo/index.htm

But I have huge problem to make fluid gallery page which must have horizontal layout.

My attempts:

  1. { display:inline;} for div containing image and this script https://gist.github.com/1784053 for resizing. Doesn’t work well as inline elements can’t have width set. Result: http://www.projektowaniestronwww.net/photo/kids3.htm
  2. When I use only the script for resizing (https://gist.github.com/1784053) everything works fine but I don’t know how to make photos vertical. Result: http://www.projektowaniestronwww.net/photo/kids4.htm
  3. {display:inline-block;} only doesn’t work properly also. Result: http://www.projektowaniestronwww.net/photo/kids5.htm (try to change browser window).

Do you have any idea how can I achieve vertical layout for photos and make them resizable?

2

HI,

What’s wrong with the last example exactly? It seems to scale ok in Firefox.

If you want the images aligned top then use vertical-align:top on .cell5.

You alos need to lose the width on header as that is causing a scrollbar as you have 100% + margin.

3

Thanks Paul O’B for response.
Header fixed.
In the last example photos don’t have the same height…
And they should have the same height like here http://www.projektowaniestronwww.net/photo/kids3.htm

4

Try removing the 67% width from .cell5.

Edit:

No that won’t work either sorry! The images stop scaling.

5

Exactly…Why the width of the photo is constant (449 px)? I think here is the problem.
The script uses parent dimension for image and cell5 is inline element and doesn’t have width?

Maybe use float…But I don’t know the width of container…There will be many pictures.

6

Hold on, your example 3 seems to be working ok.

The images won’t resize as soon as you move the browser window because they are in an element that stretches miles wider than the viewport and won’t be affected by the size of the viewport. Once the window is small enough the images start resizing down ok. There is no need for them to resize when they are inside a scrollbox as the scrollbox gets smaller but the content inside stretches outside the viewport.

7

I don’t understand. So why if you resize the browser to for example 80% and when you look at example 3 and without changing size of the browser look at http://www.projektowaniestronwww.net/photo/ you will see larger photo on home page? Look than at example 2 and the first photo has good dimensions…but images just aren’t horizontal.

8

The images in the horizontal example have their width based on the box inside the scrollbox. When you close the browser window the box inside the scrollbox doesn’t change at all so why should the image scale.

On your home page set the container to a large width.


#container {
    clear: both;
    padding: 0 0 0 40px;
    width: 2000px;
}

Now resize the browser and the image does not change. This is what happens when you try to put them in your horizontal scrollbox.

There is no need for them to resize because the element holding them doesn’t get any smaller. You can still scroll to see the images and when the window is very small your example3 will shrink and seems to work well. I don’t see how it could work any differently.

9

You’re right. The slider stopped resizing.

Do you really think there is no other option to make these layouts (heights on home and gallery page) look the same?
What about {float:left} for images (problem is width of container)?

The problem is that I’m not sure if the client is going to accept that…

10

You can do the same horizontal effect with float left but you just give the parent a very large negative margin and the floats line up horizontally.

e.g.


#ex3 {
	float:left;
	margin-right:-32767px;/* browser limit*/
}
#container3 { 
	width:80%;
	overflow:auto ;
margin:auto;
}
.cell5 {
	float:left;
	margin-right:20px;
	height:auto;
}

However the same problem exists in that the inner container never gets any smaller so the image never has anything to scale against.

I guess you could script it so that rather than the parent width you use the viewport width instead.

e.g.


    	<script type='text/javascript'>
    	
    	function adaptiveResize() {
    		var $w, $target;
     		$target = $('img');
    		$target.each(function() {
    		[B]	$w = $('body').width();
    			$target.css('max-height', $w/2 );[/B]
     		});
     	}
    	
    	$(window).load(function() {
    		adaptiveResize();
    	});
    	  
    	$(window).resize(function() { 
    		adaptiveResize();
    	});
    	</script>




#ex3 {
	float:left;
	margin-right:-32767px;/* browser limit*/
}
#container3 { 
	width:80%;
	overflow:auto ;
	margin:auto;
}
.cell5 {
	float:left;
	margin-right:20px;
	height:auto;
}

That seems to have the effect you wanted.

11

Yes, you are great! :slight_smile:
But there’s still one tiny problem: It looks excellent on larger screen not on 100% window.
http://www.projektowaniestronwww.net/photo/kids5.htm

Maybe I should change size of the image to smaller?

12

It looks pretty good to me at all widths although I guess on larger screens the image gets larger but that’s to be expected I would think.

On another matter rather than using the 80% width I gave you it would look better with a m argin instead.

e.g.


#container3 {
    margin: 0 80px;
    overflow: auto;
}
13

That didn’t change the height of images at lower size of browser window.
It sill looks excellent for larger screen…rather that for sth like 1200 resolution.
Do you think there’s any way to fix it?

14

Hi,

I’m not sure I understand the problem now lol :slight_smile:

The image scales up and down proportionately with the browsers window. Isn’t that what you wanted?

What is the exact problem with smaller window widths as it looks the same proportion as larger widths but just smaller. How did you want it to look as I’m not sure I’m understanding the issue?

Whatever, you need will mean adjusting the script anyway. You could try adjusting this value:


$target.css('max-height', $w/2 );

That is using the body width divided by 2 for the scaling factor. Try something like $w * .4 for a smaller image size.

15

2.3 works like a charm! http://www.projektowaniestronwww.net/photo/kids5.htm
Thank you very much! :slight_smile:
But in Opera I can see y scrolling on #ex3 div. It looks good on FF and Safari and even IE!

Opera fixed


#container3{    margin: 0 80px;
    overflow: auto;overflow-y: hidden;}

Paul thanks a lot once again :slight_smile:

16

Yes hiding the overflow-y should remove the scrollbar in Opera.