Imgix APIsレンダリング APIアペンドアペンドの配置

アペンドの配置

append-align

append-align パラメーターは、append の画像を、接する辺に沿ってどう揃えるかを指定します。この指定が意味を持つのは、その辺の方向で2枚の画像のサイズが異なる場合のみです。同じ場合は揃える余地がありません。

受け取る値

受け取る値は append-side によって変わります。左または右への追加では、2枚の画像を垂直方向に揃えます。

値説明
top小さい方の画像を、大きい方の上端に揃えます
middle小さい方の画像を接する辺の中央に配置します(デフォルト)
bottom小さい方の画像を、大きい方の下端に揃えます

上または下への追加では、水平方向に揃えます。

値説明
left幅の狭い方の画像を、広い方の左端に揃えます
center幅の狭い方の画像を接する辺の中央に配置します(デフォルト)
right幅の狭い方の画像を、広い方の右端に揃えます

対応していない組み合わせの値(append-side=bottom&append-align=top など)を指定した場合は、中央揃えのままになります。

使用例

以下のデモでは、600px幅の写真に300px幅のロゴを追加しているため、動くのはロゴの方です。

下に追加した場合の append-align=left
sandbox-demo
append-align=right
sandbox-demo
右に追加した場合の append-align=top
sandbox-demo
append-align=bottom
sandbox-demo