Currently, I am working on a web page that will feature several small images. My goal is to display these images in two columns and have them adjust their size as the window dimensions change.
Feel free to check out my jsFiddle:
Upon resizing the window, you may notice that the images move around to accommodate different column numbers based on the window width. However, I actually want the images to resize so that there are consistently two columns displayed at all times.
Initially, I thought setting the image width to 45% would do the trick... but it seems more complex than I anticipated.
Here's the snippet of code from the Fiddle:
<div id="Thumbs">
<ul>
<li>
<img src="http://goo.gl/LXa6K">
</li>
<li>
<img src="http://goo.gl/LXa6K">
</li>
<li>
<img src="http://goo.gl/LXa6K">
</li>
<li>
<img src="http://goo.gl/LXa6K">
</li>
<li>
<img src="http://goo.gl/LXa6K">
</li>
<li>
<img src="http://goo.gl/LXa6K">
</li>
</ul>
-
#Thumbs ul {
list-style: none;
}
#Thumbs ul li {
float:left;
margin: 10px 0 0 5%;
}
#Thumbs ul li img {
/*
How can I properly resize these images?
*/
}