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

web制作

CMSによるブログやニュースサイトなどで、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に投稿するようにしましょう。

この記事をSNSでシェアする?

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


  • 1
    このエントリーをはてなブックマークに追加
  • Pocket

PROFILE

yoshi

KIYOTATSU(キヨタツ)を運営しているウェブ制作者のYoshiです。得意な分野はディレクションとコーディングです。デザインはシンプルなものだけ可能です。他、色々と随時習得中です。