html - Bootstrap 图片大小不一样

Question

我对 Bootstrap css 有疑问。我有一个带有页眉、正文和页脚的面板。正文包含图像。每个图像都已调整为相同的 700 像素宽度和 450 像素高度。然而，面板最终尺寸不同，页脚未彼此对齐。

如何解决这个问题？

.cshtm代码:

 <div class="col-md-4 col-sm-6">
        <div class="panel">
            <div class="panel-heading">
                Visual Similarity Duplicate Image Finder
            </div>
            <div class="panel-body">
                <a href="portfolio-item.html">
                    <img class="img-responsive img-blog img-hover" src="@ViewBag.AccreditationImage2" alt="">
                </a>
            </div>
            <div class="panel-footer">
                <p>Accreditation test Progress: 10%</p>
                <p>Version: 5.5.0.1</p>
                <p>Vendor: MindGems, Inc.</p>
            </div>
        </div>
    </div>

和无处不在的图像:

更新

事实证明，即使调整大小相同，图像的自然高度也确实不同。无论如何，我怎样才能强制面板中的图像都具有相同的大小？

Answer 1

在没有看到 css 的情况下无法具体说明您的情况，但您应该能够在图像或容器上设置 height 属性:

<style>
.panel-body {
    height : 450px
}
</style>

或:

<style>
   .panel-body img {
        height : 450px
    }
</style>