Сделать прямоугольные миниатюры квадратными для большого размера экрана в сетке бутстрапа

Question

Я работаю над реализацией сетки данных квадратных изображений в бутстрапе. Одним из требований является то, что сетка остается квадратной, а изображения сжимаются при переходе на меньшую ширину экрана. Ниже у меня есть текущая реализация, она отлично работает для больших изображений, но когда я пытаюсь использовать изображение под определенным размером, миниатюры выглядят квадратными для больших экранов. Может ли кто-нибудь посоветовать мне, как адаптировать это для небольших изображений? Также у меня есть сильное предпочтение сделать это без добавления css, и если это невозможно, я бы хотел найти минимально инвазивное решение.

fiddle

HTML:

<div class="container"> 
    <div class="row"> 

    <div class="col-xs-6"> 
     <a class="thumbnail" href="http://www.google.com"><img class="img-responsive img-rounded" src="http://www.op-art.co.uk/op-art-gallery/var/albums/your-op-art/GDHarley_OP-ART_%2311.jpg?m=1382213140" /></a> 
    </div> 

    <div class="col-xs-6"> 
     <a class="thumbnail" href="http://www.google.com"><img class="img-responsive img-rounded" src="http://www.op-art.co.uk/op-art-gallery/var/albums/your-op-art/GDHarley_OP-ART_%2311.jpg?m=1382213140" /></a> 
    </div> 

    </div> 

    <div class="row"> 
    <div class="col-xs-6"> 
     <a class="thumbnail" href="http://www.google.com"><img class="img-responsive img-rounded" src="http://davidsimpson.me/wp-content/uploads/2014/04/icon1281.png" /></a> 
    </div> 
    <div class="col-xs-6"> 
     <a class="thumbnail" href="http://www.google.com"><img class="img-responsive img-rounded" src="http://davidsimpson.me/wp-content/uploads/2014/04/icon1281.png" /></a> 
    </div> 
    </div> 
</div> 

Answer 1

Меньшие изображения должны иметь ширину 100% поэтому вы должны использовать код CSS, просто добавьте этот CSS класс:

.full-width 
{ 
    width:100%; 
} 

, а затем использовать это в теге:

<img class="img-responsive img-rounded full-width" ... />