How to make a responsive image with CSS?

Navigation
0

I'm using css to make the article.noticiaprincipal image responsive, but in addition to not working it disrupts 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>
    
asked by anonymous 19.06.2017 / 00:42

2 answers

1

This is because the width value of parent% wrapper is set to a fixed value of div , so at low resolutions this size will always be equal. When you should be doing the same thing that I did with the images ... 

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

Here's a working example below and another here in jsFiddle to drag the window and see it 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>
    
19.06.2017 / 02:59
0

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

article.noticiaprincipal img{ /* imagem responsiva */
    max-width: 100%;
}
    
19.06.2017 / 01:18
Get permission to write to SD Card on Android 6+ Data being multiplied in the table