Question

I’m designing a page which will have a few small images on it. I want them to be in two columns and grow/shrink as the window changes.

Take a look at my jsFiddle:

You’ll notice that as you resize the window, the pictures shift about so that when the window is small there is only one column and if the window is very wide there are many. Instead of this behaviour, I would like to resize the images so that there are always two columns.

I thought that it would be a simple case of setting the width to 45%… apparently not.

Heres the 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 do you resize the images?
*/
}

Answer 1

Set height and width in CSS to 100%.

#Thumbs ul li img {
    height: 100%;
    width: 100%;
}

See the edit here.

You can see the change in these screen shoots: