Web.fla

主食は、html/css/php/javascript(jQuery) デザートはactionscript!WEBに関することをメモってくサイト

*

【CSS】画像をスマホ対応!!ウィンドウに合わせて自動で拡大・縮小させるには?!

   

ここ最近はスマホが主流になってきているのでレスポンシブなWEBサイトを作ることも多いと思います。
そんな時に画像のサイズって悩んだりしません?

例えばトップページだとメインの画像がファーストビューにあってスマホで見ると画像がはみ出しちゃってるとか・・そんな、悩みをCSSでウィンドウに合わせて自動的にリサイズさせれば簡単にスマホに対応できるよね♪っていうのが今回の目的です。まずは下記にサンプルを作りました。

画像のサイズがスマホにあっていない例として

スマホ用に最適化されていないとレイアウトがおかしいことになってしまう例として

  • スマホで見ると画像が大きすぎてはみ出しちゃってる

他にも色々ありますが、画像のサイズが最適化されていないと、レイアウトが崩れてユーザーにも非常に見にくいサイトになってしまいますよね。
では、これをCSSで解決してきます。

ウィンドウサイズに合わせて画像サイズを自動で伸縮させる

ではスマホはもちろんウィンドウサイズに合わせて画像を縦横比を維持したまま伸縮させたいと思います。

CSSでimgタグにmax-widthを設定する

全部もしくは該当するimgタグに「max-width: 100%」を設定する事で、画面幅に合わせて自動で幅を調節させる事が可能であり、「height:auto;」を指定する事で画像の拡大・縮小に合わせて、縦横比を保持できます。たったこれだけです!

普通のwidthだとダメなの?

画像にCSSで「max-width」を設定する事で対応しましたが、「width:100%」にすると拡大・縮小にも対応してくれます。
ただ常に100%表示されてしまうので、仮に元の画像が800pxだとしてもウィンドウの幅が1200pxだとしたらそれに合わせて画像も100%で表示されるので800px以上になってしまい元の画像サイズを超えてしまい画像が伸びてしまうので注意が必要です。

max-widthが効かない場合の対処方とは

IEもしくはFirefoxでCSSの「max-width」が効かない事があるそうです。その原因と対処法です。

max-widthが効かない原因とは?

IEとFirefoxで効かない原因は、親要素のCSSで「display:table」となっていて子要素が「display:table-cell」になっている場合はmax-widthが効かないようです。

html

CSS

対処法はCSSをひとつ追加するだけ

max-widthが効かない時の対処法は、「display:table」を指定している要素に対して「table-layout: fixed」を指定するだけです。

これで、問題なくmax-widthが効くので画像がウィンドウに合わせて伸縮するようになります。

 - css

     

Message

  関連記事

【CSS】スマホでヘッダー部分を固定させるには!?

最近は、スマホサイトやらレスポンシブやらばっかですね(笑)。とまぁそんなこんなで …

CSS3で作る可変タイプのナビゲーション

さてさて、そろそろCSS3が普通に利用されてきてますね。なんてったてスマートフォ …

【CSS】CSS3でFlexboxの水平方向と垂直方向の揃え方とは!?

このブログでも、何回か記事にした事もあるCSS3のFlexboxについての記事で …

【CSS】レスポンシブルで可変+固定レイアウトで組む

最近は、レスポンスWebが流行りそうというか話題になってるけど、デバイスが多すぎ …

【CSS】text-overflowで長い文章を「・・・」で省略する方法は?

ボックスからはみ出した文章が下に回りこむとボックス要素の高さが変わったりして嫌だ …

【html5】videoタグで背景に動画を再生させる方法とは!?

動画を背景で再生させるとサイトがダイナミックになりますよね♪ 例えば下記のような …

【CSS】横並びにしたリストをを右寄せにするには

よく横並びにしたテキストのリストになっているナビゲーションを見ますが、サイトの右 …

[CSS]スマホ制作で大活躍!?table-cellで要素を横並びに配置する方法

前回、要素を横並びにするのに inline-block を使ったんですが、なんと …

【CSS】一行でテキストを左右に分けるときのCSS

よくタイトルバーなどで左側にタイトルで右側に日付なり「続きはこちら」のようにテキ …

【CSS】nth-childとnth-of-typeとfirst-childとfirst-of-typeの違い

いや~なまじjqueryをいじりまくっていたんで勘違いしてました。 nth-ch …