如何使Bootstrap缩略图图像具有相同的高度，以便缩略图面板对齐？

问题描述：

我使用Bootstrap缩略图与SVG，我从维基百科获得，但由于某些原因SVG都是不同的大小，所以它会导致缩略图面板不对齐。如何使Bootstrap缩略图图像具有相同的高度，以便缩略图面板对齐？

使用什么方法可以使缩略图图像具有相同的高度，以便缩略图面板对齐？

代码：

<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>

截图：

我不认为有任何Bootstrap内置类可以实现你想要的。 – zgood

您要么调整图像大小，使它们全都具有相同的高宽比，要么使用CSS设置该比例（可能会以不希望的方式拉伸/挤压图像）。你可以将背景图像设置为给图像元素一个宽高比，并使用'background size：cover;'填充空间（用一些裁剪）。 – hungerstar

你可以试试这个：https://github.com/liabru/jquery-match-height，或者像hungerstar说的那样使图像具有相同的尺寸。 – Vcasso

答

它看起来更像你需要调整图像的高度对准他们，但它必须是一个固定的这可能并不理想。你可以做2行，一个用于图像，一个用于文本，只要每行包含4行，class =“col-md-3”，内容将全部垂直排列，但不确定是否有其他方式排列。

你是对的，图片下面的内容会共享相同的首行，但图片库和内容之间的差距是不规则的。 – hungerstar

如何使Bootstrap缩略图图像具有相同的高度，以便缩略图面板对齐？

相关推荐