SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making a list of images fluid.

    So I'm trying to make a list of images fluid so they'll resize when the window is resized.

    Take this code for example:
    HTML Code:
    		<div id="wrapper">
    			<ul>
    				<li class="item"><img src="img/f-adler.jpg"></li>
    				<li class="item"><img src="img/f-holmes.jpg"></li>
    				<li class="item"><img src="img/f-moriarty.jpg"></li>
    				<li class="item"><img src="img/f-mycroft.jpg"></li>
    				<li class="item"><img src="img/f-watson.jpg"></li>
    				<li class="item"><img src="img/f-winter.jpg"></li>
    			</ul>
    		</div>
    Code:
    ul li{
    	display: inline;
    	float: left;
    	margin: 1px 1px;
    }
    
    img {
    	max-width: 100%;
    }
    
    #wrapper {
    	max-width: 960px;
    	margin: 0 auto;
    }
    Demo

    So you can see I have the img element set to "max-width: 100%;" so it will resize appropriately when its container shrinks. However, the images only resize when the browser window width is smaller than the image width. This actually isn't even working on the latest version of Firefox for some reason... but it's working in Chrome so it would be nice if someone could explain why that is too.

    Anyway, I want it so that once the window size is resized small enough, the #wrapper will start shrinking. Instead of dropping the images into one column, I want them to start shrinking relative to the window size. How can this be done?

    I see it being done on one of A List Apart's demo here, but I can't seem to figure out how they do it: http://d.alistapart.com/responsive-w...-flexible.html

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Something like this would help:

    Code:
    li {
      max-width: 45%; 
      margin: 1%;
    }
    It can be dicey combining px and %, hence my preference to % margin.

  3. #3
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Something like this would help:

    Code:
    li {
      max-width: 45%; 
      margin: 1%;
    }
    It can be dicey combining px and %, hence my preference to % margin.
    Even with that change, the images are still dropping into one column and they aren't resizing until the window is smaller than the image width.

    How can I get them to resize like in here?: http://d.alistapart.com/responsive-w...-flexible.html

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Isaac Lean View Post
    Even with that change, the images are still dropping into one column
    They will do what you want if you add that code in (I tested it). It would be useful if you would update your demo so we can see where you are up to.

    they aren't resizing until the window is smaller than the image width.
    That's a different matter. In that case, you'd have to make the wrapper more fluid. E.g.:

    Code:
    #wrapper {width: 60%;}
    
    ul {width: 100%;}
    
    li {width: 48%; margin: 1%;}
    
    img {width: 100%;}

  5. #5
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    They will do what you want if you add that code in (I tested it). It would be useful if you would update your demo so we can see where you are up to.



    That's a different matter. In that case, you'd have to make the wrapper more fluid. E.g.:

    Code:
    #wrapper {width: 60%;}
    
    ul {width: 100%;}
    
    li {width: 48%; margin: 1%;}
    
    img {width: 100%;}
    Oops sorry, actually I didn't add a max-width to li. It does work nice, thanks!

    Also for the "different matter", actually it seems like your first solution solves that problem as well. For those who are too lazy to test the updated code, I've uploaded a demo here.

    It seems like its working okay with margins set under pixels, but I'll keep the whole pixel and % problems in mind.

    Anyway, again thanks a bunch!

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Cool, glad that helped. The second solution makes the images scale with any browser movement, rather than just at a certain point, so it just depends on what behavior you want.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Isaac Lean View Post
    Also for the "different matter", actually it seems like your first solution solves that problem as well. For those who are too lazy to test the updated code, I've uploaded a demo here.
    Remember the doctype or it won't work in any version from ie9 down and also throw ie10 into quirks mode as well


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
  •