画像をレスポンシブに対応させるCSS

幅も高さも親要素の合わせたい

思い通りにならないCSS

CSSに関する小ネタをたまに書いてます。

レスポンシブなサイトを制作する際に、

画像の幅や高さを自動で親要素にフィットするようにさせたい時ってありますよね？

以前はimgタグに直接widthやheightを書かないといけない風潮だったのですが、最近はそうでもありません。

ガラケー時代はwidthに100%を指定してheightは指定しないという方法が主でした。

CSS

とりあえず可変にするCSSは以下の通り

img {
  max-width :100%;
  height :auto;
}

上記はimgタグ全てに指定してますが、ワタクシはクラスを作って書いてます。

この指定によって、

画像の実際の幅を越えて拡大する事はなく、

画像の幅より親要素が小さければ、それにFITするように画像も小さくなります。

display:table;の落とし穴

今回記事を書いた理由がこれ（笑）

現在制作中のサイトで先輩から「画像がすごい大きく表示されてるんだけど？」と指摘されて見てみると…

確かにデカい！なんだこれ？Google chromeだと正常に表示されてるのに！！

display:table;とtable-cellを使ったレイアウトが原因

ちなみに先輩のブラウザはFirefoxで、IEでも同様の現象が起こってました。

で、原因は、

親要素がdisplay:table;で子要素にdisplay:table-cell;を指定したレイアウトだったことが原因で、

親要素にtable-layout: fixed;を挿入する事で解決しました。

table-layout: fixed;

これはテーブルの幅を固定にする指定です。

デフォルトだとfixedではなくautoとなっており、

この状態だと内部の文字数等によってテーブルの幅が変わってしまう状態です。

widthを指定していればGoogle chromeでは固定されたような挙動だったので気づきませんでした＼(^o^)／

ってかこれ知ってたのに直ぐに気づかなかった…（笑）