画像をボックス内の上下センターに配置するためのマージン(margin-top)を計算する

HTMLで画像をボックス内に(左右の)センター配置するのは簡単ですが(text-align:center)、上下の中央に配置するのは簡単に出来ません。
CSSハックのようなものもありますが、せっかくPHPを使えるのですから、正攻法で計算しちゃいましょう。

function get_image_margin_for_vertical_center(
 $box_width,
 $box_height,
 $image_width,
 $image_height,
 $round=0,
 $percent=TRUE,
 $prepend_property='margin-top',
 $append_unit='%'
) {
 if ($image_width / $image_height > $box_width / $box_height) {
  $margin_top_r = ( ($box_height - ($box_width / $image_width) * $image_height) / 2 ) / $box_width;
  $margin_top = $unit = '';
  ;
  if ($percent) {
   $margin_top = $margin_top_r * 100;
   $unit = '%';
  }
  else {
   $margin_top = $margin_top_r * $box_width ;
   $unit = ($append_unit == '%') ? 'px' : $append_unit;
  }
  $prepend_property = $prepend_property ? preg_replace('/(?:\x3a\s*?)?$/', ':', $prepend_property) : '';

  $round !== NULL && $margin_top = round($margin_top, $round);
  return $prepend_property . $margin_top . $unit;
 }
 return NULL
;
}
  •  $box_width : 配置するボックス(コンテナ)の幅
  •  $box_height : 配置するボックス(コンテナ)の高さ
  •  $image_width : 画像(配置される要素)の幅
  •  $image_height : 画像(配置される要素)の高さ
  •  $round=0 : マージンの値の丸め方。小数点以下の桁数(round()の第2引数に渡ります)
  •  $percent=TRUE : マージンを%で算出するかどうか。コンテナの幅に対する割合になります。デフォルトはTRUE
  •  $prepend_property=’margin-top’ : 先頭に追加する文字(デフォルト”margin-top”。CSS記述にすぐ出来るように)
  •  $append_unit=’%’ : 単位を付けるかどうか。デフォルトで”%”

なお、JavaScriptに移植して、ウィンドウのリサイズイベントにbindしたりすると、コンテナ要素のリサイズに対応できたりします。

Leave a Reply