Feel Physics Backyard

HoloLensの出張授業をする会社で、教材を開発しています

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

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でもモバイルでも適切な大きさで画像を表示する方法を学びました。

ではでは!