エントリー

  • 2016/10/19 17:01
  • HTML

レスポンシブ化 img編

今度は画像編。

一応、ヘタッピなりにも攻略っぽい事もやっていたりして…
その場合、Excel等で作成した大きな画像を用意するケースも。

大体幅800が多いかな?
それを細工せずに使用すると、…
「モバイルフレンドリーじゃねぇぞ。 ゴルァ」
と、ググる先生に怒られます(苦笑

20161019165103.jpg
じゃあって事で
・max-width: 100%
・height: auto
を指定すると、ウィンドウサイズに合わせ
自動的にサイズが修正されます。

が…
要は画像が縮小表示されるだけので
風景や写真の画像なら問題無いかもだけど
文字が入った画像なんかは潰れちゃって何が何やらな状態に。
┐(-_-;)┌

20161019165104.jpgさすがに、それじゃ不親切だよなぁ。と。

そんな訳で画像を「div」で囲み専用のclassを用意。
・max-width
・height
・overflow 等を指定。

画像は100%サイズで表示させ、
スクロールで操作できるように変更しました。

ただ…
スマホには拡大させる機能もあるそうで…

拡大させる方がラクなのか、
スクロールさせる方がラクなのか…

ガラパゴス住民には判りません。
≧∇≦ブハハハハハ

ページ移動

トラックバック

  • トラックバックはまだありません。

トラックバックURL

https://izuito.net/_cgi/freo/trackback/4932

コメント

  • コメントはまだありません。

コメント登録

  • コメントを入力してください。
登録フォーム
名前
メールアドレス
URL
投稿キー(スパム対策に、投稿キー を半角で入力してください。)
コメント
閲覧制限

ユーティリティ

- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

過去ログ

ノート

  • ノートは登録されていません。

新着エントリー

新着コメント

Re:アクアビーズアート(2)
2021/10/10 from はやとまる
Re:旗印、自作してみた。
2021/02/18 from goopee
Re:初のスキルLV.10武将 の続き 2
2014/09/24 from DSHata(管理人)
Re:伊東市の鳥
2014/05/16 from DSHata(管理人)
Re:【訃報】
2014/04/26 from DSHata(管理人)