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

2019年5月19日

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

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

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

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

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

・右下を基準に切り取り

[index.html]

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <img src="https://programming.sincoston.com/wp-content/uploads/2019/05/1530185101186-e1557536486749-226x300.jpg"
        class="square right-bottom" alt="" width="226" height="300" />
</body>
</html>

[index.css]

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

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

スポンサーリンク

csscss

Posted by ton