読者です 読者をやめる 読者になる 読者になる

Weed.nagoya:便利ツールでネット活用

物理教育アプリを開発しています

PCで見ると適切なサイズの画像がモバイルだとハミ出ている!

開発-Web:その他 Webサービス-電脳生活 Webサービス-電脳生活:ブログ スマホ・ガジェット等 Webサービス

f:id:weed_7777:20160701203343j:plain

CSSの話です。PC用にサイトを作っていたら、モバイルで見たとき画像が画面からはみ出てしまうことがあります。モバイルもPCも両方ちゃんと表示させる方法はまだ広まっていないようです。対処法を示します。

私の場合はこれでした:

f:id:weed_7777:20160701202739p:plain

バイルで見るとこうなります:

f:id:weed_7777:20160701203343j:plain

これはよろしくない、ということでいろいろ情報を探して、ついに以下の記事に至りました:

blog.phiyard.net

「ファイヤードブログっていったい…😅

要するに以下のようにすればOKです。

@media screen and (max-width: 480px) {
  #too_big_image
  {background-size: contain;};
}

ちなみにcontainは画面の幅に合わせてピッタシ拡大縮小してくれます。では見てみましょう:

f:id:weed_7777:20160701203647j:plain

できた!大変だった…


PCでもモバイルでも適切な大きさで画像を表示する方法を学びました。

ではでは!