Галерея с «укладкой» изображений

Question

Я не сделаю галерею изображений в CSS. Изображения не должны быть обрезаны, но должны иметь одинаковую ширину. Я не хочу, чтобы они были сторонниками, а скорее друг над другом. Я представил изображение того, что я хочу, чтобы он выглядел. Нижняя часть представляет собой дескриптор для каждого изображения. Разметка и CSS для теперь что-то вроде этого:

<div class="thumbnail">  
<a title="img1" href="images/img1.jpg" data-lightbox="gallery1"> 
<img src="images/img1.jpg" alt="img1"> 
<p>img1</p> 
</a> 
</div> 

<div class="thumbnail">  
<a title="img2" href="images/img2.jpg" data-lightbox="gallery2"> 
<img src="images/img2.jpg" alt="img2"> 
<p>img2</p> 
</a> 
</div> 


.thumbnail { 
    width: 300px; 
} 

The layout i want to get
This is what i have now

Answer 1

Я нашел то, что мне нужно в чистом CSS. Итак, вот ссылка, если кому-то это нужно. https://css-tricks.com/seamless-responsive-photo-grid/

Answer 2

Попробуйте использовать

height: auto 

с использованием макета, как это достичь ваших изображений масштаба, как вам нравится.

<style type="text/css"> 
    .col{  
     width:300px; 
     float:left; 
     margin: 5px; 
    } 
    .col img{  
     width:100%;; 
     height:auto; 
    } 
    </style> 
<div class="col"> 
<img src="img0.png" /> 
<br/><br/> 
<img src="img1.png" /> 
</div> 
<div class="col"> 
<img src="img0.png" /> 
<br/><br/> 
<img src="img1.png" /> 
</div>