html - Make rectangular thumbnails square for large screen size in a bootstrap grid -


i'm working on implementing data grid of square images in bootstrap. 1 requirement grid remain square , images shrink on transition smaller screen widths. below have current implementation, works great large images, when try use image below size thumbnails appear square large screen widths. can 1 advise me on how adapt smaller images? have strong preference out adding css , if that's not possible i'd find minimally invasive solution.

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>

smaller images need have 100% width therefore have use css code, add css class:

.full-width {     width:100%; }

and use in tag:

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

Comments

Post a Comment

Popular posts from this blog

IF statement in MySQL trigger -

this query code in mysql trigger. if 1=2 select 'yes'; else select 'no'; end if; but has following error: if '1'='2' select 'yes' error code: 1064. have error in sql syntax; check manual corresponds mysql server version right syntax use near 'if '1'='2' select 'yes'' @ line 1 0.000 sec what solution?
Read more

c++ - What does MSC in "// appease MSC" comments mean? -

i run across // appease msc in c++ comments, e.g. here : const int& array::operator[](int offset) const { int mysize = getitssize(); if (offset >= 0 && offset < getitssize()) return ptype[offset]; throw xboundary(); return ptype[offset]; // appease msc! } what msc stand ? the author means microsoft's compiler, more formally known msvc.
Read more

android - MPAndroidChart - How to add Annotations or images to the chart -

i working latest mpandroidchart library , looking way add annotations or images clickable. example: once data reaches value event occurs want able display user - there multiple events can occur annotations (not sure if right word) or image added @ point in chart. any pointers welcome. check documentation of yaxis . focus on setspacetop(...) , setaxismaxvalue(...) methods. for background: bar-shadow , disable calling: barchart.setdrawbarshadow(false) or change color: bardataset.setbarshadowcolor(int color)
Read more