配置画像の一部分だけを表示させる。
配置画像の元サイズが分かるように同サイズの矩形も表示させています。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
body {
background: mediumpurple;
height: 100vh;
margin: 0;
display: flex;
justify-content: center; /* 水平方向中央揃え */
align-items: center; /* 垂直方向中央揃え */
}
.mainbox {
width: 300px;
height: 300px;
background: mediumvioletred;
}
.image-crop {
width: 300px;
height: 300px;
overflow: hidden;
}
.image-crop img {
clip-path: inset(50px 100px 50px 100px);
/* 上, 右, 下, 左の順に切り取る */
}
</style>
</head>
<body>
<div class="mainbox">
<div class="image-crop">
<img src="pic/image.jpg" alt="切り取りイメージ">
</div>
</div>
</body>
</html>
<!-- index.html -->
切りとりをしていない状態
clip-path: inset(0px 0px 0px 0px);
/* 上, 右, 下, 左の順に切り取る */
clip-path: inset(50px 100px 50px 100px);
/* 上, 右, 下, 左の順に切り取る */
clip-path: inset(0px 0px 100px 100px);
/* 上, 右, 下, 左の順に切り取る */
clip-path: inset(100px 100px 0px 0px);
/* 上, 右, 下, 左の順に切り取る */
