[CSS] 画像を崩さずにサイズ指定でトリミングする方法[画像調整]

画像を崩さずにサイズ指定でトリミングする方法は以下の通り

.img-box {
 margin: 10px;
}
.img-box img {
 width: 200px;
 height: 200px;
 object-fit: cover;
}
.left-bottom {
 object-position: 0 100%
}
.right-bottom {
 object-position: 100% 100%
}

object-fit: cover;でサイズ指定でトリミング。デフォルトは中央でトリミングされるので、トリミング位置を変更したい場合は、object-positionで指定する

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です