xhml・html

レスポンシブWebデザイン 画像

2019年03月22日
ネットビジネス便利ツール】のモバイル対応です。

ここからは色々なページで共通して修正した項目についてまとめてみます。

今まではPC用にサイトを作っていたので、画像もPCに合わせた大きさになっています。これから作る画像もPCに合わせた大きさにします。
スマートフォンでは大きな画像を縮小表示することで対応します。

画像を自動リサイズする際に拡大縮小しすぎを防ぐCSS1. 画像をウインドウ幅に合わせて表示したいが、本来の大きさより拡大はしたくない場合を設定しました。

css ---------------------------------------------------
img {
max-width: 95%;
height: auto;
}
------------------------------------------------------

画面いっぱいより少し小さくしたいので、95%を指定しました。
元々PC用に作ったページでは、画像の本来の大きさで表示しているからでしょう、これだけできちんと表示されました。
コメントの書き込み
コメント