サムネイルでimg画像の比率問わず同じサイズの見え方でレスポンシブ表示するcss記述

ソースコード

HTML側でdivタグ「.img_waku」の中に「img」タグを設置。cssは下記のように記述します。

.img_waku{
  position: relative;
  width: 100%;
  padding-top: 66.67%;
  overflow: hidden;
}

.img_waku img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
}

要は、relativeとabsoluteを使うってだけの話です。

この書き方により、img画像の左上を起点として、3:2の比率でサムネイルを同じ見え方で表示させることができます。

比率を変えたい時はpadding-topの%数値を調整すればOKです。

注意点は、あまりに縦長の画像だったりすると、同じサイズで表示はされても、肝心の画像が全然見えなくなったりする（画像の左上の部分だけ表示されるようになってしまう）ので、ある程度の比率は合わせてからimg画像をCMSに投稿するようにしましょう。