<div class="photos">
<figure>
<div><img src="https://static.imalan.cn/file/image/post/39075.jpeg" /></div>
<figcaption>PIC 1</figcaption>
</figure>
<figure>
<div><img src="https://static.imalan.cn/file/image/post/f02e4.jpeg" /> </div>
<figcaption>PIC 2</figcaption>
</figure>
<figure>
<div><img src="https://static.imalan.cn/file/image/post/215cd.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.