- 更新日: 2016年8月19日
- HTML & CSS
画像がはみ出るのを防ぐCSSスタイルシート指定(モバイル・スマホ対応)
ウェブサイトのモバイル表示で画像サイズが端末画面より大きすぎて画面からはみ出したり、デスクトップ・モバイルに限らずグリッドレイアウトのボックス等から画像がはみ出したり、ウェブページのレイアウトが崩れる場合があります。
たとえ、レスポンシブデザインやモバイル専用ページ等でスマートフォン・モバイル端末の表示に対応していても、画像サイズが適正値をオーバーするだけで起こってしまう問題です。この問題に対する対処法を考えて、以下の CSS を使う方法に落ち着きました。
— 環境 —
Google Chrome Version 52.0
Firefox 48.0
iPhone(iOS9.3) Safari
画像付き英語辞書 Imagict | 英単語をイメージで暗記width: 100% と max-width: ***px を指定する
width: 100%; と max-width: ***px のCSSプロパティを指定することで、望み通りに画像を適正サイズで表示できるようになりました。まずは Ruby on Rails での例です。
assets のスタイルシートで width: 100% のクラス・セレクタを定義する。
app/assets/stylesheets/common.css.scss
|
1 2 3 |
.width-100-percent { width: 100%; } |
続いてビューで image_tag ヘルパーを使って、width-100-percent のクラス指定とインラインCSSで max-width を指定する。max-width は動的なサイズで指定する要件だったので、インライン CSS で指定しました。
app/views/users/show.html.erb
|
1 |
<%= image_tag(image.url, class: 'width-100-percent', style: "max-width: #{image.width}px") %> |
width-100-percent のセレクタを定義せずに、width: 100% をインライン CSS の style 属性で指定する場合。
app/views/users/show.html.erb
|
1 |
<%= image_tag(image.url, style: "width: 100%; max-width: #{image.width}px") %> |
自分の意見としては、汎用的な CSS はインラインじゃなくてセレクタ定義しておいたほうが良いと思いますけど。
Rails じゃない場合は以下。
css
|
1 2 3 |
.width-100-percent { width: 100%; } |
html
|
1 |
<img class="width-100-percent" src="***.png" style="max-width: ***px" /> |
width: 100% をインライン CSS で指定する場合。
html
|
1 |
<img src="***.png" style="width: 100%; max-width: ***px" /> |
これで上手く目論見通りに、グリッドレイアウトやモバイル画面から画像がはみ出さずに、適切なサイズで表示できるようになりました。この原理は…
max-width は要素に与えられる幅の上限を指定する為に用いる CSS プロパティです。このプロパティは、 width プロパティの値が max-width で指定された値より大きくなることを防ぎます。
と mozilla の説明があります。つまり、例えば width: 100%; max-width: 600px と指定すると、width（画像の幅）は常に 100% で表示する、ただし width が 600px を超える場合は 600px の幅で表示する、という命令になります。下記ページも参考になる。
CSS width 100% OR max-width in pixels – Stack Overflow
[CSS]要素の幅指定widthとmax-width、どちらに100%と固定幅を指定すべきか | コリス
max-width: 100% だけだとグリッドレイアウトからはみ出る
モバイル端末で画面ウィンドウ幅から画像がはみ出るのを防ぐだけの目的であれば、以下のように max-width プロパティに 100% と指定するだけでも大丈夫でした。検索すると、こちらの方法を紹介してあるページが多数見つかります。
|
1 |
max-width: 100%; |
ただし、max-width: 100% の指定だけだとグリッドレイアウト等に対応できません。Twitter Bootstra を用いてグリッドレイアウトで Rails のビューを作成していたのですが、以下のように書きますと…
|
1 2 3 4 5 6 7 8 |
<div class="row"> <div class="col-xs-12 col-md-3"> <%= image_tag(image.url, style: "max-width: 100%") %> </div> <div class="col-xs-12 col-md-9"> <%= render 'image_detail', image: image %> </div> </div> |
画像のサイズがグリッドの幅（col-md-3）を超える場合に、画像がはみ出てしまいます。
この場合はやはり、次のように width: 100%; max-width: ***px を指定する必要がある。
app/assets/stylesheets/common.css.scss
|
1 2 3 |
.width-100-percent { width: 100%; } |
app/views/users/show.html.erb
|
1 2 3 4 5 6 7 8 |
<div class="row"> <div class="col-xs-12 col-md-3"> <%= image_tag(image.url, class: 'width-100-percent', style: "max-width: #{image.width}px") %> </div> <div class="col-xs-12 col-md-9"> <%= render 'image_detail', image: image %> </div> </div> |
- HTML & CSS の関連記事
- SassとSCSSを変換するsass-convertコマンドとウェブサービス
- CSSをBEM/MindBEMdingの命名規則で書いてみる
- Twitter Bootstrapのデザインと挙動を気軽にテストできるBootplyが超絶便利！
- CSSでスクロールバーをデザイン(WebKitブラウザ)
- はてなブックマーク人気記事ブログパーツのデザイン変更
- Twitter Bootstrapで端末サイズ毎にHTML要素の表示・非表示を切り替え
- Bootstrap3をInternet Explorer8(IE8)に対応させる
- Twitter Bootstrap のカスタマイズをライブラリ本体に手を入れずに行う
- Sass の @extend で存在しないセレクタを指定する
- Rails + bootstrap-sass で submit ボタンに class, id を割り当てずに css を指定
Leave Your Message!