CODEWITHSUNDEEP
cssresponsive-design
StudioTime
StudioTime

Reputation: 23969

Images not responsive although in responsive container

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

Upvotes: 4

Views: 12868

Answers (2)

Shadi Alnamrouti
Shadi Alnamrouti

Reputation: 13248

#hp_imgs {
    width:66%;
    float:left;
    max-width:143px;
    height:auto;
}

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

Upvotes: 0

Harry Finn
Harry Finn

Reputation: 892

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.

Upvotes: 5

Related Questions