My issue arises when cropping photos, as the captions end up being hidden within the thumbnail images. How can I ensure that the captions are visible and also make all images the same height?
I am striving to achieve a layout similar to this: ![][2]
$( document ).ready(function() {
var heights = $(".thumnbnail").map(function() {
return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$(".thumnbnail").height(maxHeight);
});.thumbnail {
height: 200px;
width: 300px;
overflow: hidden;
}
.thumbnail img {
height: auto;
width: 600px;
}<div class="row">
<div class="col-md-3">
<a href="#">
<div class="thumbnail">
<img src="http://ksassets.timeincuk.net/wp/uploads/sites/55/2017/11/GettyImages-873359588-920x584.jpg" alt="osooabina" class="img-responsive image thumbnail">
<div class="caption">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,.
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="#">
<div class="thumbnail">
<img src="https://i.pinimg.com/736x/22/5e/80/225e80ea57b247c188ac160ed34fe3cf--ariana-grande-tattoos-ariana-grande-no-makeup.jpg" alt="" class="img-responsive">
<div class="caption">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,.
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="#">
<div class="thumbnail">
<img src="http://gazettereview.com/wp-content/uploads/2015/12/Eminem-Featured-image.jpg" alt="osooabina" class="img-responsive image thumbnail">
<div class="caption">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,.
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="#">
<div class="thumbnail">
<img src="https://www.biography.com/.image/t_share/MTQ3MzM3MTcxNjA5NTkzNjQ3/ariana_grande_photo_jon_kopaloff_getty_images_465687098.jpg" alt="" class="img-responsive">
<div class="caption">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,.
</div>
</div>
</a>
</div>
</div>I would like to know how to modify the code to resemble the design shown in the image above.