【css】画像を正方形に切り取る(トリミング)方法

2019年5月19日

画像などを画面に並べるときに、それぞれの画面の縦横の長さが違うと並び方がめちゃくちゃになって見栄えが悪いですよね!

みなさんがよく知っているラインなどは、アルバムで画像を見ると、すべての画像が正方形に切り取られて、

きれいに整列してますよね。

今回は、cssを使って画像を正方形に切り取るためのコードを紹介します。

「object-fit: cover;」の記載が重要

[サンプル]
・まずは元の形(縦長)

・正方形に切り取り

[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" alt="" width="226" height="300" />
</body>
</html>

[index.css]

.square {
  object-fit: cover; /* 画像をトリミング(この一行がトリミングに大事) */
  width: 226px; /* 正方形にする */
  height: 226px; /* 正方形にする */
}

スポンサーリンク

csscss

Posted by ton