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

Question

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

Navigation

#1 by (0 votes)

0

How do I make the internal% s images automatically adjust their 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>

html5 css

asked by anonymous 28.06.2017 / 22:29

1 answer

dataTables does not sort numbers correctly with string How do I maintain a radioButton's marking when scrolling a listview?

score 0 · Answer 1

CSS

Thinking responsively, let's leave our items in% for 2 columns by going like this:

For each item I applied 50% in width

We selected the first item to zero 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><figureclass="highlights-item">
        <a href="#">
        <img src="http://palloi.github.io/responsive-header-only-css/assets/images/chaves-2.jpg"></a></figure><figureclass="highlights-item">
        <a href="#">
        <img src="http://palloi.github.io/responsive-header-only-css/assets/images/chaves-3.jpg"></a></figure><figureclass="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 type among the children of its parent