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