0

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>
1
  • 1
    Era essa solução que você procurava @Gladison ?
    – Chun
    Commented 9/07/2017 às 16:36

2 Respostas 2

1

Isso é porque o valor width da div parent/wrapper está definido para um valor fixo de width: 885px;, então em baixas resoluções este tamanho será sempre igual. Quando devias estar a fazer o mesmo que fizes-te com as imagens...

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

Eis um exemplo funcional abaixo e outro aqui no jsFiddle para poderes arrastar a janela e ver melhor isto em acção.

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>

0

Muito simples, adicione apenas o atributo max-width a imagem, porém com valor de 100%:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .