Force bootstrap responsive image to be square

Answer 1

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

Answer 2

This link works for me.JSFiddle
Instead of using <div><img/></div>, background-position; background-size; background-repeat will do the trick.

Answer 3

web-tiki answer almost worked for me, for bigger images I had to add this HTML and CSS to have them centered within the square:

.image{
    position:relative;
    overflow:hidden;
    padding-bottom:100%;
}
.image img{
    position:absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

Answer 4

You could wrap every image in a div and then set the div's overflow to hidden. As long as the div is square then you're image will appear cropped. The div can be responsive as well. similar post

Answer 5

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%);
}