How to mount 3-column CSS mosaic?

Asked

Viewed 1,052 times

0

I am having difficulties to assemble the mosaic of the example below for the mobile version of my site

The version in orientation:portrait must be something similar to that:

..........................
.          |             .
.  Img 1   |             .
.          |             .
...........|  Img 3      .
.          |             .
.          |             .
.  Img 2   |             .
..........................

And when the site is placed on landscape

I want them to be in 3 columns like this:

  ...........................
  .      |        |         .
  .      |        |         .
  . Img1 | Img 2  | Img 3   .
  .      |        |         .      
  ...........................

About the images which size they should be?

html css img

  • It has to be pure CSS?

  • Open to all solutions, pure css preference, but if you have another good solution I accept too.

  • I highly recommend using Bootstrap, it will keep a clean responsive and the image dimensions will "not lose" your pixels.

4 answers

1

I made inline to facilitate.

Portrait: 

<div class="container1" style="width:50%;height:100px; float:left;">
  <img src="img1" style="heigth:50%;width:100%;">
  <img src="img2" style="heigth:50%;width:100%;">
</div>
<div class="container2" style="width:50%;">
  <img src="img3" style="heigth:100%;width:100%;">
</div>

Landscape: 

<div class="container1" style="width:77%; height: 100px; float:left;">
  <img src="img1" style="heigth:100%;width:50%;">
  <img src="img2" style="heigth:100%;width:50%;">
</div>
<div class="container2" style="width:33%;">
  <img src="img3" style="heigth:100%;width:100%;">
</div>

Media Querie you solve

0

Try using this CSS, use in several projects and works perfectly for me. Can customize with the desired number of columns.

#photos {
    line-height: 0;
   -webkit-column-count: 3;
   -webkit-column-gap:   0px;
   -moz-column-count:    3;
   -moz-column-gap:      0px;
   column-count:         3;
   column-gap:           0px;  
}

#photos img {
   width: 100% !important;
   height: auto !important;
}

0

You can separate "these differences" into different . CSS files:

<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">

Or have a default file that applies to everything on your site, and have a specific condition as p pseudo-code demonstrates below:

<style>
  @media (min-width: 500px) and (max-width: 600px) {
    .oqueseraalterado {
        width: 100px;
    }
  }
</style>

0

One way is to use the flex, next to the media-queries:

.container{ 
  display: flex; 
  max-width: 300px; /* Você pode trocar a largura aqui livremente */
}

.container .all, .container .last{
  display: flex;
  flex-flow: column;
}

.all, .last{ width: 100%; }

.all .image, .last .image{
  width: 100%;
}

.last .image{
  width: 200%;
}


@media(orientation: landscape){
  .container{ 
    display: block;
    max-width: initial;
  }

  .container .all, .container .last{ 
    display: inline-block; 
    width: initial;
  }

  .image{
    display: inline-block;
    width: auto !important;
    height: 300px;
  }
  
}
<div class="container">
  <div class="all">
    <img src="http://placehold.it/150x150" class="image" />
    <img src="http://placehold.it/300x300" class="image" />
  </div>
  <div class="last">
    <img src="http://placehold.it/600x600" class="image" />
  </div>
</div>

Browser other questions tagged html css img

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