【css】画像を任意の位置を基準に切り取る（トリミング）方法

2019年5月11日2019年7月18日css

前回の記事で、画像を正方形に切り取る（トリミング）の方法を紹介しました。

上記の記事は、画像の中央を基準に切り取られていました。

そこで、今回は任意の位置で切り取る方法を紹介します。

「object-position: 横の位置 縦の位置;」を設定する。

[サンプル]
・まずは中央を基準に切り取り

・右下を基準に切り取り

[index.html]

<img class="square right-bottom"
    src="https://programming.sincoston.com/wp-content/uploads/2019/05/1530185101186-e1557536486749-226x300.jpg" alt=""
    width="226" height="300" />

[index.css]

.square {
  object-fit: cover;
  width: 226px;
  height: 226px;
}

.right-bottom {
  object-position: 100% 100%; /* ここが重要（%やpxで設定する) */
}