Responsive images and lists - css

Question

Tryign to get it so that I have a max width for an image to be 308px and when the browser is scaled larger then the list will have more items per row. Just now it seems stuck at 3 list items per row but if I would like it to be fully reponsive and if the browser is scaled to minum it can be then it will be one image per row.
html
<ul>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
<li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
</ul>
css
ul{
position:relative;
float:left;
width:100%;
height:100%;
margin:45px 0 0;
}
ul li{
width: 33.3333%;
float:left;
}
ul li img{
display: block;
height: auto;
width: 100%;
}
JSFIDDLE

Answer 1

You need to use media queries.
Just set up media queries for each "breakpoint" and change the li width.
For example:
/* Show one image on devices under 540px */
#media screen and (max-width: 540px) {
ul li{
width: 100%;
float:left;
}
}
/* Show three images on devices between 550 and 800px wide */
#media screen and (min-width: 540px) and (max-width: 800px) {
ul li{
width: 33.333%;
float:left;
}
}
/* Show five images on devices between 800px and 1180pxwide */
#media screen and (min-width: 800px) and (max-width: 1180px) {
ul li{
width: 20%;
float:left;
}
}
http://jsfiddle.net/spacebeers/gfjDk/3/

Answer 2

Use media queries (as per SpaceBeers' suggestion) coupled with a min-width property on the list items...
JsFiddle

Answer 3

Another idea would be to use display: inline-block; instead of float: left and set max-width: 308px; and min-width: 100px; for the list items.
demo
HTML:
<ul>
<li><img src="image.jpg"></li><!--
--><li><img src="image.jpg"></li><!-- as many more list items as you need
-->
</ul>
The way I've written it (with comments between list items) does serve a purpose - any kind of whitespace matters when using inline-block.
CSS:
ul {
padding: 0;
margin: 45px 0 0;
}
ul li{
min-width: 100px;
width: 33.3333%;
max-width: 308px;
display: inline-block;
}
ul li img{
display: block;
height: auto;
width: 100%;
}