img画像をレスポンシブスマホに対応させるcss

画像は<img>で貼りこむのにPC表示と共にスマホやタブレットなどに対応したレスポンシブ表示が求められます。

小さい画面でimg画像だけがはみ出すとデザイン崩れの原因になります。
しっかりと画面比率に合わせて画像サイズが伸縮するようにcssを整えます。

このページでは、img画像をレスポンシブ化させる方法を紹介します。

設定方法

<img>で記事に貼付ける画像は、widthを「100%」、heightを「auto」として画面比率に合わせて可変することが可能です。

例えばimg画面をレスポンシブ化すると、次のようにPC表示とスマホ表示では画面サイズに合わせて画像サイズが変化します。

以下のコードをcssに記述します。

これで<img>で記事に画像を貼付けつけると可変式になりました。以下は実際のサンプル画像です。ブラウザサイズを縮小すると画面サイズに合わせて可変しています。

写真枠付き画像

ただ画像を可変式にするよりもデザインを整えると見た目も良くなります。写真のようなフレームを追加して、画像を表示します。

以下のコードをCSSに記述します。

使用する際は<img>を<p>などで囲って、.photoのクラス属性を追加します。

<img>画像にborderを1px追加します。写真枠の部分はpaddingで設定します。画像の全体サイズはwidht:100%＋border:1px＋padding:5pxですが、box-sizingを設定すると、widht:100%のみになり、僅かなサイズ崩れが防げます。

また、画像にカーソルが重なった際に色が透けるように、opacity:0.85を設定しています。

浮き出た画像

画像が浮き出たように表示されて、立体感のある形に設定します。

以下のコードをCSSに記述します。

使用する際は<img>を<p>などで囲って、.cubeのクラス属性を追加します。

boder-radius:5pxにすると画像の角が丸みを帯びます。また、box-shadowにより、画像に影が追加されて、浮いているような立体感が生まれます。

画面サイズに合わせて画像は可変します。

透明な枠付き画像

画像の周りに透明な枠を追加します。
立体感もあり、写真がきれいに飾れるのでお勧めです。

以下のコードをCSSに記述します。

使用する際は<img>を<p>などで囲って、.transparenceのクラス属性を追加します。

boder-radius:4pxにすると画像の角が少しだけ丸くなります。box-shadowで影を追加しているので、少しだけ立体感が出ています。

写真のフレーム部分は、background-colorで透明化しています。背景が白以外だと透明になっているのがわかります。

グレーの枠付き画像

簡単なグレーの枠付きのある画像を作成します。シンプルに飾らないタイプなので標準的に良いと思います。

以下のコードをCSSに記述します。

使用する際は<img>を<p>などで囲って、.simpleのクラス属性を追加します。

<img>画像にborderを5pxを記述して、画像の枠部分を作成します。画像の全体サイズはwidht:100%＋border:5pxですが、box-sizingを設定すると、widht:100%のみになり、僅かなサイズ崩れが防げます。

オプション

WEBサイトの設計によっては、img画像下に僅かな隙間が発生することがあります。気になる場合は、vertical-alignを記述すると画像の下に余計な空白が入らなくなります。

まとめ

記事を作成するときに文字の次に重要な役割を果たすのが画像なので、しっかり表示されるようにしたいものです。

画像はレスポンシ化させるとスマホやタブレットの小さい画面でも完璧に表示されます。
WEBサイトの訪問者もストレスなく記事の観覧ができます。