How do I have the internal ASIDE images adjust their height and width automatically?

Asked

Viewed 246 times

0

How do I make the internal images of ASIDE adjust its height and width automatically according to browser resizing?

CSS

aside{
  background-color: #222;
  margin-top: 10px;
  margin-left: 10px;
  width: 100%;
  max-width: 1200px;
  margin-bottom: 10px;
  box-sizing: border-box;

}
aside figure{
  float: left;
  margin-bottom: 20px;
  margin-right: 10px;
}

aside figure img{ /* redimensionar imagem */
    max-width: 300px;
    width: 100%;
}

HTML

<aside>


        <figure>
            <a href="#">
            <img src="./imagens/praias.png" width="300" height="400">
            </a>
        </figure>

        <figure>
            <a href="#">
            <img src="./imagens/praias.png" width="300" height="400">
            </a>
        </figure>

        <figure>
            <a href="#">
            <img src="./imagens/praias.png" width="300" height="400">
            </a>
        </figure>

        <figure>
            <a href="#">
            <img src="./imagens/praias.png" width="300" height="400">
            </a>
        </figure>

    </aside>
css html5

  • Why do images have width and height defined if the dimension is controlled by CSS? These properties have higher priority than CSS and will never be overwritten.

  • @Andersoncarloswoss how can I make adjustments to html and css? Can you help me?

  • Start by removing these attributes.

  • @Andersoncarloswoss could rewrite this code for me?

  • Try it first, you’ll learn more.

  • @Andersoncarloswoss removed the attributes

  • Let’s go continue this discussion in chat.

Show 2 more comments

1 answer

0

THE CSS

Thinking about the responsive, let’s leave our items in % for 2 columns following this way:

For each item I applied 50% in width

We select the first item to reset the margin using the ":first-of-type" selector.

.highlights {
     position: relative;
}

.highlights-item {
   float: left;
   margin: 0 0 0 0;
   width: 50%;
}

.highlights-item:first-of-type {
   margin-left: 0;
}

.highlights-item img {
   display: block;
   width: 100%;
   margin: 0 0 5px;
}
<aside>
    <figure class="highlights-item">
        <a href="#">
        <img src="http://palloi.github.io/responsive-header-only-css/assets/images/chaves.jpg">
        </a>
    </figure>

    <figure class="highlights-item">
        <a href="#">
        <img src="http://palloi.github.io/responsive-header-only-css/assets/images/chaves-2.jpg">
        </a>
    </figure>

    <figure class="highlights-item">
        <a href="#">
        <img src="http://palloi.github.io/responsive-header-only-css/assets/images/chaves-3.jpg">
        </a>
    </figure>

    <figure class="highlights-item">
        <a href="#">
        <img src="http://palloi.github.io/responsive-header-only-css/assets/images/quico.png">
        </a>
    </figure>

</aside>

The pseudo-class :first-of-type represents the first element of its kind among the children of its parent element

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.