Organizing photos in multiple frames

Question

Organizing photos in multiple frames

Navigation

#1 by (4 votes)

4

I wanted to make this effect from the image below.

Here

img.fotosC {
  margin: 5px;
}

img.fotoLat {
  width: 17%;
}

img.fotoCent1 {
  width: 10%;
}

img.fotoCent2 {
  width: 40.5%;
}

<div id="ContCentral">
  <div>
    <img class="fotoLat fl fotosC" src="https://rolfmodas.com.br/PCP/_fotos/716E-1.jpg"/><!--classflé"float left"-->
  </div>
  <div>
    <img class="fotoCent1 fotosC" src="https://rolfmodas.com.br/PCP/_fotos/006E-1.jpg"/><imgclass="fotoCent2 fotosC" src="https://rolfmodas.com.br/PCP/_banner/1-banner.png"/></br><imgclass="fotoCent2 fotosC" src="https://rolfmodas.com.br/PCP/_banner/4-banner.png"/><imgclass="fotoCent1 fotosC" src="https://rolfmodas.com.br/PCP/_fotos/2000P-1.jpg"/></div><div><imgclass="fotoLat fotosC" src="https://rolfmodas.com.br/PCP/_fotos/015-1.jpg" />
  </div>
</div>

html css

asked by anonymous 14.11.2018 / 19:10

1 answer

How to paint multiple page elements by clicking and dragging the mouse? Print Checkbox with JQuery

score 4 · Accepted Answer

Dude like you said that you do not know display:grid I will suggest you this complete guide will help you in other cases.

Now look at this image, notice the grid lines I've split them using repeat(nomero de repetiçoes, tamanho da célula) in the case 8 cells of equal size repeat(8, 1fr) , to make the size of the cells I used span n / n, you can read about it here tb: link and to give the spacing between one image and another just set the grid-gap (I commented on css)

Seethenaturalresponsivenessofgrid

AboutadjustingtheimagesinsidethecellIusedobject-fitYoucanreadmoreaboutthisinthisquestion:#

Here is the code for the image above:

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    height: 200px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(2, 100px);
    grid-gap: 1rem; /* espaço entre as imagens */
    box-sizing: border-box;
}

.i1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}
.i2 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}
.i3 {
    grid-column: 4 / 7;
    grid-row: 1 / 2;
}
.i4 {
    grid-column: 7 / 9;
    grid-row: 1 / 3;
}
.i5 {
    grid-column: 3 / 6;
    grid-row: 2 / 3;
}
.i6 {
    grid-column: 6 / 7;
    grid-row: 2 / 3;
}

section {
    box-sizing: border-box;
    border: 1px solid;
}
section > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

<div class="container">
    <section class="i1">
        <img src="https://placecage.com/100/100"alt="">
    </section>
    <section class="i2">
        <img src="https://placecage.com/100/100"alt="">
    </section>
    <section class="i3">
        <img src="https://placecage.com/100/100"alt="">
    </section>
    <section class="i4">
        <img src="https://placecage.com/100/100"alt="">
    </section>
    <section class="i5">
        <img src="https://placecage.com/100/100"alt="">
    </section>
    <section class="i6">
        <img src="https://placecage.com/100/100"alt="">
    </section>
</div>