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:


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


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-web-design/ex/ex-site-flexible.html

Something like this would help:

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-web-design/ex/ex-site-flexible.html

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

#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!

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

Remember the doctype or it won’t work in any version from ie9 down and also throw ie10 into quirks mode as well :slight_smile: