CSSの話です。PC用にサイトを作っていたら、モバイルで見たとき画像が画面からはみ出てしまうことがあります。モバイルもPCも両方ちゃんと表示させる方法はまだ広まっていないようです。対処法を示します。
私の場合はこれでした:
モバイルで見るとこうなります:
これはよろしくない、ということでいろいろ情報を探して、ついに以下の記事に至りました:
「ファイヤードブログ」っていったい…😅
要するに以下のようにすればOKです。
@media screen and (max-width: 480px) { #too_big_image {background-size: contain;}; }
ちなみにcontain
は画面の幅に合わせてピッタシ拡大縮小してくれます。では見てみましょう:
できた!大変だった…
PCでもモバイルでも適切な大きさで画像を表示する方法を学びました。
ではでは!