<div class="photos">
    <figure>
        <div><img src="https://cdn.imalan.cn/img/post/2018-10-26/IMG_0073.jpeg" /></div>
        <figcaption>PIC 1</figcaption>
    </figure>
    <figure>
        <div><img src="https://blog.imalan.cn/usr/uploads/2019/03/1463017562.jpg" /> </div>
        <figcaption>PIC 2</figcaption>
    </figure>
    <figure>
        <div><img src="https://cdn.imalan.cn/img/post/2018-10-26/IMG_0053.jpeg" /></div>
        <figcaption>PIC 3</figcaption>
    </figure>
</div>
body{
  margin: 0;
}
div.photos{
  width: 95vw;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  figure{
    position: relative;
    margin: 5px;
    div{
      position: relative;
      height: 0;
      width: 100%;
      img{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}

/* figcaption is not important */
figcaption{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  margin: 0;
  padding: 60px 0 10px;
  color: #fff;
  text-align: center;
  background-image: linear-gradient(180deg,hsla(0,0%,100%,0) 0,rgba(0,0,0,.03) 26%,rgba(0,0,0,.4) 71%,rgba(0,0,0,.5));
  opacity: .6;
  transition: opacity .3s ease;
}
figure:hover figcaption{
  opacity: 1;
}
(function(){
  var base = 50;
  $.each($('.photos'), function(i, photoSet){
    $.each($(photoSet).children(), function(j, item){
      var img = new Image();
      img.src = $(item).find('img').attr('src');
      img.onload = function(){
        var w = parseFloat(img.width);
        var h = parseFloat(img.height);
        $(item).css('width', w*base/h +'px');
        $(item).css('flex-grow', w*base/h);
        $(item).find('div').css('padding-top', h/w*100+'%');
      };
    });
  });
})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js