既存ページ画像のレスポンシブ化

おはようございます。にわか管理人のBenです。
今日は、我が社のWEBサイトのデザイン更新時の課題の一つをノートしたいと思います。

我が社はフリーのCMSのMODXを使用しています。CMSはHTML言語の知識がなくてもホームページを作れるというものですが、実際はある程度の知識がないと自在に作れません。今回はコンテンツはそのままでデザインを変えました。具体的にはCSSを全面更新して、左メニューをなくして画面幅を広げ、スマホ対応のメニューにして、レスポンシブ対応にしました。

profile.png

20160316a.jpg
試しに私の画像とJPEGの写真を素材にしました。スマホ等の様々な画面解像度などの環境に合わせるレスポンシブWEBデザインですが、既存のコンテンツをそれに対応させるために、足手まといになるのが画像です。ブロックタグのdivはwidthを100%にすればどんな解像度でも横幅いっぱい使ってそのデバイスに応じたサイズになってくれます。

seesaa_profile_icon

20160316a.jpg
一方、画像はというと、画面幅より画像サイズが大きい場合は画面幅いっぱいに画像が適宜縮小表示されるのでいいのですが、画面のほうが大きい場合、ご覧のように無駄に拡大表示することになります。

そこで前にdivで適用させましたが、max-widthをCSSに記述します。もし、画像の本来の幅が400pxだった場合、CSSでwidth:100%;max-width:400pxにしておくと、「幅は基本的に画面幅全体で表示するけど、最大幅は400pxまでですよ」という風になります。これにより必要以上に拡大されて表示することがなくなります。

実はSeesaaブログはこの辺が全て自動で設定されているので、画像の幅をいじらなくても勝手に対応してくれます。なので、一番上の画像もスマホ版だと勝手にwidthが100%になっているようです。我が社のWEBサイトも同じようにいちいちmax-widthを各々の画像の大きさに合わせて設定しなくていいように工夫しました。Seesaaブログほど自在ではありませんが、比較的簡単にできる方法を次回ノートします。蛇足ですがこのスタジアムどこでしょうか?

この記事へのコメント


この記事へのトラックバック