画像の取り扱いについての考察２

正方形のフレームを作る際に面白い方法があったので、サンプルを作成した。
下記の square クラスがそれにあたる。
height : 0; とし、padding-bottom で同じだけの割合を指定すると正方形になる。ただし、背景を着色すると微妙に大きい感じがするので calc を使用して微調整している。
hover した際の変更も追加してる。zoom ではなくtransform で変更している。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>正方形をつくる</title>

    <style type="text/css">
/* ブラウザ初期化 */
* {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
    box-sizing: border-box;
}

/* 正方形を作るフレーム */
.square {
    width: 30%;
    height: 0;
    /* このあたりは微調整 */
    padding-bottom: calc(30% - 3px);
    background-color:   black;
    border: 1px solid #333;
    overflow: hidden;
}

/* 正方形フレーム内画像タグ */
.square img {
    width: 100%;
    object-fit: cover;
    object-position: center;
    opacity: .5;

    transition: .5s;
}
.square img:hover {
    transform: scale(1.5, 1.5);
    opacity: 1;
}

    </style>
</head>

<body>

    <div class="square">
        <img src="./image/center.jpg" alt="center">
    </div>

</body>
</html>