How to make a responsive image with CSS?

Question

I’m using css to make the image article.noticiaprincipal responsive, but in addition to not working disorganizes the later elements.

CSS

article.noticiaprincipal{
  float: left;
  width: 885px; /* 885px */
  height: auto;
}
article.noticiaprincipal img{ /* para redimensionar a imagem */
    max-width: 885px;
    width: 100%;
    max-height: 280px;
    height: auto;
}
article.noticiaprincipal h1{
  font-size: 30px;
  color: #3b3b3b;
  padding: 10px;
}

HTML

<section>

        <article class="noticiaprincipal">

            <h1>Título da notícia</h1>
            <figure>
                <img src="./propaganda_rotativa/supportgv.png" width="885" height="280" title="Propaganda rotativa">
            </figure>

        </article>

        <figure class="anunciofixo">
                <a href="#" target="_blank">
                <img src="./propaganda_rotativa/supportgv.png" width="885" height="120" title="Anúncio fixo">
                </a>
        </figure>

</section>

Answer 1

That’s because the value width of div Parent/wrapper is set to a fixed value of width: 885px;, then at low resolutions this size will always be the same. When you should be doing the same as you did with images...

max-width: 885px;
width: 100%;

Here is a functional example below and another here in jsFiddle so you can drag the window and see this better in action.

article.noticiaprincipal{
    max-width: 885px;
    width: 100%;
    height: auto;
}
article.noticiaprincipal img{
    max-width: 885px;
    max-height: 280px; /* É mesmo necessário?! */
    width: 100%;
    height: auto;
}
.anunciofixo img {
    max-width: 885px;
    max-height: 280px; /* É mesmo necessário?! */
    width: 100%;
    height: auto;
}
article.noticiaprincipal h1{
    font-size: 30px;
    color: #3b3b3b;
    padding: 10px;
}

<section>
    <article class="noticiaprincipal">
        <h1>Título da notícia</h1>
        <figure>
            <img src="http://lorempixel.com/885/280/sports/1/" width="885" height="280" title="Propaganda rotativa">
        </figure>
    </article>

    <figure class="anunciofixo">
        <a href="#" target="_blank">
            <img src="http://lorempixel.com/885/120/sports/2/" width="885" height="120" title="Anúncio fixo">
        </a>
    </figure>
</section>

Answer 2

Very simple, just add the attribute max-width the image, but with a value of 100%:

article.noticiaprincipal img{ /* imagem responsiva */
    max-width: 100%;
}