Skip to main content
Revisão sintática do título.
Link
José Dız
  • 7mil
  • 2
  • 18
  • 30

Como fazer uma imagem resposivaresponsiva com CssCSS?

Fonte Link
Gladison
  • 656
  • 9
  • 31

Como fazer uma imagem resposiva com Css?

Estou utilizando o css para tornar a imagem article.noticiaprincipal responsiva, mas além de não funcionar desorganiza os elementos posteriores.

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>