[Bootstrap] レスポンシブイメージを常に正方形に

Twitter Bootstrapでレスポンシブ画像を常に正方形にする方法のメモです。

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

これでimgタグの高さが横幅にあわせて変化し、常に正方形になってくれます。なお、横長画像の場合は下が空きます。縦長の画像の場合は下にはみ出した部分は表示されません。

ブログエントリーの関連記事をタイル状に並べる際に、正方形以外の画像が混じっているという状況で必要になりました。参考にしたのは毎度お馴染みのStack Overflowです。

css – Force bootstrap responsive image to be square – Stack Overflow

http://stackoverflow.com/questions/23400232/force-bootstrap-responsive-image-to-be-square

ありがたいことです。