Images not responsive although in responsive container
- by Darren Sweeney
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
