CODEWITHSUNDEEP
htmlimagecsstwitter-bootstrap-3
Dave Gordon
Dave Gordon

Reputation: 1835

Bootstrap images not the same size

I have a problem with Bootstrap css. I have a panels with header, body and footer. The body contains an image. Each of the images have been resized to the same 700px width and 450px height. Yet the panels end up different sizes with the footer not being aligned to each other.

How can this be fixed?

.cshtm code:

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

and the ubiquitous image: enter image description here

UPDATE

It turns out the natural height of the images are indeed different even though they were all resized the same. Anyway, how can I force the images in the panel to all be the same size?

Upvotes: 0

Views: 1310

Answers (1)

Jonathan Crowe
Jonathan Crowe

Reputation: 5803

Can't tell what is happening in your case specifically without seeing the css but you should just be able to set the height attribute on the image or container:

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

or:

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

Upvotes: 1

Related Questions