アペンドの配置
append-align
append-align パラメーターは、append の画像を、接する辺に沿ってどう揃えるかを指定します。この指定が意味を持つのは、その辺の方向で2枚の画像のサイズが異なる場合のみです。同じ場合は揃える余地がありません。
受け取る値
受け取る値は append-side によって変わります。左または右への追加では、2枚の画像を垂直方向に揃えます。
| 値 | 説明 |
|---|---|
top | 小さい方の画像を、大きい方の上端に揃えます |
middle | 小さい方の画像を接する辺の中央に配置します(デフォルト) |
bottom | 小さい方の画像を、大きい方の下端に揃えます |
上または下への追加では、水平方向に揃えます。
| 値 | 説明 |
|---|---|
left | 幅の狭い方の画像を、広い方の左端に揃えます |
center | 幅の狭い方の画像を接する辺の中央に配置します(デフォルト) |
right | 幅の狭い方の画像を、広い方の右端に揃えます |
対応していない組み合わせの値(append-side=bottom&append-align=top など)を指定した場合は、中央揃えのままになります。
使用例
以下のデモでは、600px幅の写真に300px幅のロゴを追加しているため、動くのはロゴの方です。



