大きな画像が枠からはみ出して表示されるのを防ぐ

作成日 2013/10/04
Redmine 2.5.0以降ではこの記事で紹介している対策は不要です(#3163

RedmineのチケットやWikiで横に大きい画像をインライン表示させると、画像が表示枠を超えた状態で表示されてしまいます。Redmineのテーマを調整することで大きな画像は枠内におさまるよう縮小されて表示されるようになります。

枠からはみ出した状態:

枠内におさまるよう縮小表示された状態:

チケットやWikiに画像を貼り付けるには、画像ファイルの添付を行った上で画像ファイル名を ! で囲んでください。例えば、チケットに添付された sample.jpg という画像ファイルを表示させるためには !sample.jpg! と記述します。

対策方法

方法1: 使用中のテーマに画像の最大サイズを制限する記述を追加する

使用中のテーマの stylesheets/application.css ファイルに以下の記述を追加すると、表示枠より大きな画像が枠におさまるよう縮小表示されるようになります。

div.wiki img {
  max-width: 100%;
}

方法2: farend_basic または farend_fancy テーマを使用する

ファーエンドテクノロジー株式会社が公開している farend_basic または farend_fancy テーマにはあらかじめ画像の最大幅を制限するためのCSSが含まれているため、これらのテーマを使用すると画像がはみ出さずに表示されるようになります。

farend_basic または farend_fancy テーマの入手方法・使用法については下記ページをご覧ください。

関連情報