CSS3 Images not responsive

Question

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

SLL · Accepted Answer · 2017-10-02 17:36:59Z

2

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.

answered Oct 2, 2017 at 17:36

SLL

2712 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vitjbr · Accepted Answer · 2017-10-02 18:54:33Z

0

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%;
    }

answered Oct 2, 2017 at 18:54

vitjbr

1,1863 gold badges14 silver badges25 bronze badges

1 Comment

Lucky Lam Over a year ago

It's working now. Thanks. Note that I removed width:100% in .page-wrap

Collectives™ on Stack Overflow

CSS3 Images not responsive

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related