Images not responsive although in responsive container

Question

I have the following:

<div id="hp_imgs">
    <img src="/images/hp/1.jpg">
    <img src="/images/hp/2.jpg">
    <img src="/images/hp/3.jpg">
    <img src="/images/hp/4.jpg">
    <img src="/images/hp/5.jpg">
    <img src="/images/hp/6.jpg">
    <img src="/images/hp/7.jpg">
    <img src="/images/hp/8.jpg">
</div>

The images were sized when created to form a grid of sorts, so need to be in the order where they are.

Consequently, when/if the page is resized I want the images to resize and stay where they are.

Here's what I'm trying but images are simply staying the same size and not resizing:

#hp_imgs {
    width:66%;
    float:left;
}

#hp_imgs img {
    float:left;
    margin:2px;
    border-radius:4px;
    display: block;
    max-width:100%;
    height:100%;
}

Is there a better/different way to achieve this?

FIDDLE

Here's a sample to play with: Fiddle

JSBin

JSBin

Answer 1

I tend to set a base CSS rule for all images like this to make them automatically act responsively =

img {
     width:100%;
     height:auto;
}

This way the image retains its aspect ratio based on the parent/container width, setting the height to the correct proportional size when resized.