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](https://i.stack.imgur.com/DY7RP.png)

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

I want to do this without jquery so CSS only!