Force bootstrap responsive image to be square

Question

Images are created in a loop with:

<div id="row">     <div class="col-sm-6">         <div id="row">         <?php         foreach ($products as $product)         {         ?>             <div class="col-sm-6">                 <a href="/admin/product/"   class="thumbnail">                 <div class="caption">                     title<br>                     10  x viewed                 </div>                 <img src="/assets/img/product/<?php echo $product['img'] ?>" class="img img-responsive full-width" />                 </a>             </div>         <?php         }         ?>         </div>     </div> </div> 

The images are from diffrent sizes some are higher then the width, and some are wider then the height. how can i force all images to have the same with as the height while being responsive. It is ok for them to have widh:100%, but i can not use height:auto, the ratio will stay then. What should i do to make my images squared while they are responsive and i dont know the %.

Example, the green shirt is not as high as his width

I want to do this without jquery so CSS only!

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

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