CSS mask for image grid

Question

How to create a grid of images with images that are well aligned in the same rows of height and columns of the same width, giving us the opportunity to have images with different proportions in a responsive design, in CSS?

Take this grid example page, it is self-evident: http://destadesign.com/test/capricorn/test.html The image in the second row sticks out of the grid.

Responsive design rather requires us to use percentages (%) instead of fixed pixel values ​​and only for the width, so the height is calculated automatically, which in this case complicates the situation.

I would think of a clipping mask (?) For images to accomplish this (divs of the same size, with images of different sizes), however, I lack the skills to create such complex CSS. Any specific help would be greatly appreciated, but some general ideas and recommendations would also be helpful.

In the div-box blocks for HTML, there is a (pretty natural?) Structure:

<div id="1" class="figure">
  <a href="#" class="link1">        
    <img src="images/pic_mountain.jpg" alt="TARGI W PARYŻU">
    <div class="figcaption">
      <h4>test 1</h4>  
    </div>
  </a>
</div><!-- /end .figure -->

CSS with slight hovering and text centering effect:

.figure {
    position: relative;
    float: left;
    width: 10%;
    margin-right: 1%;
    left:20px;
   }
     .figure a{
      display:block;
     width:100%;
     height:100%;
     position:relative;
     z-index:2;
   }
    .figure a img{
    width:100%;
    display:block;
    }
.figcaption {
    font-size: 0.8em;
    letter-spacing: 0.1em;
    text-align: center;
    position: absolute;
    top: 0;
    left:0;
    width:100%;
    z-index: 2;
    height:100%;
    background-color:rgba(0,0,0,.4);
    transition:all 0.4s ease;

}
.figcaption h4{
  position:absolute;
  top:50%;
  left:50%;
  padding:0;
  margin:0;
  -moz-transform:translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
}
.figure a:hover .figcaption {
  opacity:0;
}

Please continue to use this CodePen for convenience: http://codepen.io/anon/pen/GopQPZ

Answer 1

Without using CSS masks, an example :

body {
  background-color: black;
  text-align: center;
}

.figure {
  display: inline-block;
  margin: 2vw;
}

a {
  border: 2px solid grey;
  border-radius: 5px;
  display: inline-block;
  height: 10vw;
  overflow: hidden;
  position: relative;
  width: 10vw;
}
a img {
  height: 150%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

<div id="figure1" class="figure">
  <a href="http://static.comicvine.com/uploads/scale_super/8/82727/1525513-the_moutain____by_vincentfavre.jpg" class="link1" target="_blank">
    <img src="http://static.comicvine.com/uploads/scale_super/8/82727/1525513-the_moutain____by_vincentfavre.jpg" alt="TARGI W PARYŻU">
    <div class="figcaption">
      <h4>test 1</h4>  
    </div>
  </a>
</div>
<div id="figure2" class="figure">
  <a href="http://www.britishairways.com/cms/global/assets/images/content/760x350_beach_Pod-3.jpg" class="link2" target="_blank">
    <img src="http://www.britishairways.com/cms/global/assets/images/content/760x350_beach_Pod-3.jpg" alt="TARGI W PARYŻU">
    <div class="figcaption">
      <h4>test 2</h4>  
    </div>
  </a>
</div>
<div id="figure3" class="figure">
  <a href="http://www.barnesandnoble.com/blog/barnesy/wp-content/uploads/2013/08/country_western.jpg" class="link3" target="_blank">        
    <img src="http://www.barnesandnoble.com/blog/barnesy/wp-content/uploads/2013/08/country_western.jpg">
    <div class="figcaption">
      <h4>test 3</h4>  
    </div>
  </a>
</div>
<div id="figure4" class="figure">
  <a href="http://junebugweddings.com/img/photobug/January2013/beautiful-landscape-wedding-portrait-by-julian-kanz.jpg" class="link4" target="_blank">        
    <img src="http://junebugweddings.com/img/photobug/January2013/beautiful-landscape-wedding-portrait-by-julian-kanz.jpg">
    <div class="figcaption">
      <h4>test 4</h4>  
    </div>
  </a>
</div>

Run codeHide result

Answer 2

CSS-, . , . - , .

https://goo.gl/5SFndB

. ! .

, . !

#photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;
}

http://codepen.io/team/css-tricks/pen/pvamyK