CODEWITHSUNDEEP
cssresponsive
Lucky Lam
Lucky Lam

Reputation: 145

CSS3 Images not responsive

I'm trying to make my images responsive but it's not working. Could someone please point out what goes wrong with my code?

HTML

<article class="main-story">

    <img src="http://f.cl.ly/items/2e3c2a1Z0D1H3u0W2K12/shera.jpg" alt="Sha Ra Rocking"/>

    <div class="story-intro">
        <h1>Most Important Story</h1>
        <p>This article has the most visual weight. <a href="http://nebezial.deviantart.com/art/she-ra-115867096">image source.</a></p>
    </div>

</article>

CSS

.main-story {
    position: relative;
    width: 800px;
    margin: 0 0 25px 0;
}

.main-story > img {
  max-width: 100%;
  max-height: 100%;
}

Here is my full code jsfiddle

Upvotes: 0

Views: 27

Answers (2)

vitjbr
vitjbr

Reputation: 1166

As SLL pointed out you need also the container to be responsive, this code should work.

jsFiddle

Please note changes in page-wrap, where I changed container to be responsive with maximum width 800px;

.page-wrap {
        width: 100%;
        margin: 20px auto;
        max-width: 800px;
    }

And changed img max width to 100% so it fits container size:

img {
        display: block;
        max-width: 100%;
    }

Upvotes: 0

SLL
SLL

Reputation: 271

The container (.main-story) for your image is always 800px, and since this space is available (and not larger than your image), your image is always filling the container.

If you don't want x-overflow then you should make your container responsive in some way as well and the image will continue filling 100% of the responsive container.

Upvotes: 2

Related Questions