Force bootstrap responsive image to be square

You can do this :

1. wrap the image in a container with padding-bottom:100%; overflow:hidden; position:relative
2. position the image absolutely inside that container.

FIDDLE

Explanation :

Padding top/bottom (like margin top/bottom) is calculated according to the width of parent element.As the .image div has the same width as its parent, setting padding-bottom:100%; give it the same height as its width so it is square (its content needs to be absolutely positioned or floated so it doesn't change the parent's size).

HTML:

<div class="col-sm-6"> 
    <a href="#" class="thumbnail">
        <div class="caption">
            title<br/>3 x bekeken
        </div>
        <div class="image">
            <img src="" class="img img-responsive full-width" />
        </div>
    </a>
</div>

CSS:

.image{
    position:relative;
    overflow:hidden;
    padding-bottom:100%;
}
.image img{
    position:absolute;
}

Here is the best solution for every size of images http://jsfiddle.net/oboshto/p9L2q/53/

HTML the same:

<div class="col-sm-6"> 
    <a href="#" class="thumbnail">
        <div class="caption">
            title<br/>3 x bekeken
        </div>
        <div class="image">
            <img src="" class="img img-responsive full-width" />
        </div>
    </a>
</div>

New CSS:

.image{
    position:relative;
    overflow:hidden;
    padding-bottom:100%;
}
.image img{
      position: absolute;
      max-width: 100%;
      max-height: 100%;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
}