Bootstrap responsive height issue

Question

Im having a hard time to understand what is going on with some images when using bootstrap 3 so hoping someone can explain.

I have the following markup to style some images

                <div class="row footer-media">
            <div class="col-sm-6">
                <h5>Recent Videos</h5>
            </div>
            <div class="col-sm-6">
                <div class="title">
                    <h5>@hallOfFame.GetPropertyValue("pageHeading")</h5>
                </div>
                @if (hallOfFame.HasValue("hallOfFameGallery"))
                {
                    foreach (var image in hofMediaFolder.Children)
                    {
                        <div class="col-xs-6 col-sm-4 hof-images">
                            <img class="img-responsive" src="@image.Url" alt="@image.Name" title="@image.Name" />
                        </div>

                    }
                }
            </div>
        </div>

The outcome is as follows

Why does the first image on the second row have a higher height than all the other images? The image is the exact same size as the others (640x480)

How can i ensure that all images (regardless of thier dimensions) are scaled to the same size, line up correctly and resize appropriately when the breakpoint changes? Does bootstrap offer a special class to achieve this or is there anything out there that i can use?

Thanks

Edit* I have now created a fiddle to show my issue, it can be viewed here https://jsfiddle.net/muncher39/um04cwmp/1/ . The images being used in the fiddle are the exact same images that i am using on my site. It turns out that the image dimensions are not all the same but im still unsure why this should be an issue?

Image sizes are as follows

1.image5.jpg = 640x480
2.image7.jpg = 640x480
3.image1.jpg = 640x480
4.image2.jpg = 640x480
5.image4.jpg = 3888x2592
6.image6.jpg = 1944x1296
7.image3.jpg = 1944x1296

Answer 1

Put them in a wrapper div (one wrapper div per image), and set them to background cover for the individual image divs - aligned center, center. Set overflow to hidden on the image container divs. Set the size of the image containers to width:100% and height to a fixed amount. The images will be clipped at the edges if they are the incorrect aspect ratio - but they will always take up consistent height. The width will be controlled by the column width and they wont get skewed when resizing the window.

Since you want it to be dynamic - you will just need to set the image paths (and some of the css) via JS/jQuery as demonstrated.

HTML

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-4 hof-images">
            <div class="image"></div>
        </div> 
        <div class="col-xs-6 col-md-4 hof-images">
            <div class="image"></div>
        </div> 
        <div class="col-xs-6 col-md-4 hof-images">
            <div class="image"></div>
        </div>  
        <div class="col-xs-6 col-md-4 hof-images">
            <div class="image"></div>
        </div> 
        <div class="col-xs-6 col-md-4 hof-images">
            <div class="image"></div>
        </div> 
        <div class="col-xs-6 col-md-4 hof-images">
            <div class="image"></div>
        </div> 
    </div>
</div>

CSS

.image {
    margin-bottom:30px;
    height:250px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
     background-size: cover;
     background-attachment: fixed;
}

JS

$('.image').eq(0).css("background", "url(http://placehold.it/450x350)").css("backgroundRepeat", "no-repeat").css("backgroundPosition", "center center");
$('.image').eq(1).css("background", "url(http://placehold.it/550x350)").css("backgroundRepeat", "no-repeat").css("backgroundPosition", "center center");
$('.image').eq(2).css("background", "url(http://placehold.it/450x450)").css("backgroundRepeat", "no-repeat").css("backgroundPosition", "center center");
$('.image').eq(3).css("background", "url(http://placehold.it/450x350)").css("backgroundRepeat", "no-repeat").css("backgroundPosition", "center center");
$('.image').eq(4).css("background", "url(http://placehold.it/650x350)").css("backgroundRepeat", "no-repeat").css("backgroundPosition", "center center");
$('.image').eq(5).css("background", "url(http://placehold.it/450x450)").css("backgroundRepeat", "no-repeat").css("backgroundPosition", "center center");

Fiddle