【发布时间】：2016-12-03 01:08:37
【问题描述】：
我正在使用从 Wikipedia 获得的带有 SVG 的 Bootstrap 缩略图，但由于某种原因，SVG 的大小都不同，因此会导致缩略图面板不对齐。
使用什么方法可以使缩略图图像具有相同的高度以使缩略图面板对齐？
代码：
<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 内置类可以满足您的需求。
-
您要么调整图像大小，使它们都具有相同的纵横比，要么使用 CSS 设置该比率（这可能会以不合需要的方式拉伸/挤压图像）。您可以设置为背景图像，为图像元素提供宽度/高度比，并使用
background size: cover;填充空间（通过一些剪辑）。 -
你可以试试这个：github.com/liabru/jquery-match-height，或者像饥饿之星说的让图像尺寸相同。
-
他们是 SVG 我误会了吗？我认为 SVG 可以是任意大小和相同的图像？
-
@user6888062 “相同的图像”是什么意思？ SVG 仍然基于宽度和高度，即使它们可以按比例放大而不会损失清晰度。您可以覆盖 SVG 的根尺寸，但它会像光栅图像（由像素组成）一样拉伸和挤压。您面临的问题是每个图像的尺寸比例不同。爱尔兰 SVG 可能是 3:2，威尔士可能是 4:3。如果您保持爱尔兰的比例但尝试匹配威尔士的高度，它将溢出容器或被剪裁（取决于父属性）。
标签： html css twitter-bootstrap svg