Bootstrap图像大小不一

我的Bootstrap css有问题。我有一个带有标题，正文和页脚的面板。身体包含一个图像。每幅图片都被调整为700px宽和450px高。然而，由于页脚不彼此对齐，面板的尺寸不同。Bootstrap图像大小不一

这怎么解决？

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

和无处不在的图像： enter image description here

UPDATE

原来的图像的自然高度是，即使他们确实都不同调整大小相同。无论如何，我怎么能强制面板中的图像都是相同的大小？

来源

2014-10-29 Dave Gordon

你确定他们是700x450吗？他们看起来不会被压扁，他们将不得不变得更小 – Turnip 2014-10-29 20:09:26

您应该用例如图片检查图片。 Chrome开发者工具，看看3张图片的_Natural Size_是否不同。 – pbaldauf 2014-10-29 20:09:27

@pbaldauf好的，谢谢你。天然大小（高度）确实不同。查看问题的更新。 – 2014-10-29 20:22:01

分不清什么是你的情况具体发生没有看到CSS，但你应该只能够把图像或容器上的高度属性：

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

或：

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

来源

2014-10-29 20:12:21

Bootstrap图像大小不一

回答

相关问题