SitePoint Sponsor

User Tag List

Results 1 to 16 of 16

Thread: Fluid images

  1. #1
    SitePoint Evangelist snecz's Avatar
    Join Date
    Mar 2007
    Location
    Warsaw, Poland
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fluid images

    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?
    Warsaw - the city that survived its own death.
    EMM8 - Profesjonalne Strony Internetowe
    Projektowanie Stron WWW

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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. #3
    SitePoint Evangelist snecz's Avatar
    Join Date
    Mar 2007
    Location
    Warsaw, Poland
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Warsaw - the city that survived its own death.
    EMM8 - Profesjonalne Strony Internetowe
    Projektowanie Stron WWW

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Try removing the 67% width from .cell5.

    Edit:


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

  5. #5
    SitePoint Evangelist snecz's Avatar
    Join Date
    Mar 2007
    Location
    Warsaw, Poland
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Try removing the 67% width from .cell5.

    Edit:


    No that won't work either sorry! The images stop scaling.
    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.
    Warsaw - the city that survived its own death.
    EMM8 - Profesjonalne Strony Internetowe
    Projektowanie Stron WWW

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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. #7
    SitePoint Evangelist snecz's Avatar
    Join Date
    Mar 2007
    Location
    Warsaw, Poland
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Warsaw - the city that survived its own death.
    EMM8 - Profesjonalne Strony Internetowe
    Projektowanie Stron WWW

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    #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. #9
    SitePoint Evangelist snecz's Avatar
    Join Date
    Mar 2007
    Location
    Warsaw, Poland
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post

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

    Code:
    #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.
    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...
    Warsaw - the city that survived its own death.
    EMM8 - Profesjonalne Strony Internetowe
    Projektowanie Stron WWW

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by snecz View Post
    What about {float:left} for images (problem is width of container)?
    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.
    Code:
    #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.
    Code:
        	<script type='text/javascript'>
        	
        	function adaptiveResize() {
        		var $w, $target;
         		$target = $('img');
        		$target.each(function() {
        			$w = $('body').width();
        			$target.css('max-height', $w/2 );
         		});
         	}
        	
        	$(window).load(function() {
        		adaptiveResize();
        	});
        	  
        	$(window).resize(function() { 
        		adaptiveResize();
        	});
        	</script>

    Code:
    #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. #11
    SitePoint Evangelist snecz's Avatar
    Join Date
    Mar 2007
    Location
    Warsaw, Poland
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post

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

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

    Code:
    #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.
    Yes, you are great!
    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?
    Warsaw - the city that survived its own death.
    EMM8 - Profesjonalne Strony Internetowe
    Projektowanie Stron WWW

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by snecz View Post
    Yes, you are great!
    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?
    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.
    Code:
    #container3 {
        margin: 0 80px;
        overflow: auto;
    }

  13. #13
    SitePoint Evangelist snecz's Avatar
    Join Date
    Mar 2007
    Location
    Warsaw, Poland
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.
    Code:
    #container3 {
        margin: 0 80px;
        overflow: auto;
    }
    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?
    Warsaw - the city that survived its own death.
    EMM8 - Profesjonalne Strony Internetowe
    Projektowanie Stron WWW

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not sure I understand the problem now lol

    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:

    Code:
    $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. #15
    SitePoint Evangelist snecz's Avatar
    Join Date
    Mar 2007
    Location
    Warsaw, Poland
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

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

    Code:
    $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.
    2.3 works like a charm! http://www.projektowaniestronwww.net/photo/kids5.htm
    Thank you very much!
    But in Opera I can see y scrolling on #ex3 div. It looks good on FF and Safari and even IE!

    Opera fixed
    Code:
    #container3{    margin: 0 80px;
        overflow: auto;overflow-y: hidden;}
    Paul thanks a lot once again
    Warsaw - the city that survived its own death.
    EMM8 - Profesjonalne Strony Internetowe
    Projektowanie Stron WWW

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Yes hiding the overflow-y should remove the scrollbar in Opera.


Bookmarks

Posting Permissions

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