My current issue involves using Bootstrap thumbnails with SVG images that I sourced from Wikipedia. Unfortunately, the SVG images are of varying sizes, causing the thumbnail panels to become misaligned.
Is there a method I can utilize to ensure that all thumbnail images have the same height, allowing the panels to align properly?
Sample Code:
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="Flag_of_England.svg" style="width: 100%;" alt="England Chat">
<div class="caption">
<h3>England Chat</h3>
<p>...</p>
<p><a href="/chat" class="btn btn-primary" role="button">Chat</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="Flag_of_Ireland.svg" style="width: 100%;" alt="Ireland Chat">
<div class="caption">
<h3>Ireland Chat</h3>
<p>...</p>
<p><a href="/chat" class="btn btn-primary" role="button">Chat</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="Flag_of_Scotland.svg" style="width: 100%;" alt="Scotland Chat">
<div class="caption">
<h3>Scotland Chat</h3>
<p>...</p>
<p><a href="/chat" class="btn btn-primary" role="button">Chat</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="Flag_of_Wales.svg" style="width: 100%;" alt="Wales Chat">
<div class="caption">
<h3>Wales Chat</h3>
<p>...</p>
<p><a href="/chat" class="btn btn-primary" role="button">Chat</a></p>
</div>
</div>
</div>
</div>
Screenshot: