<div class="img-box">
<img src="https://fastcoding.jp/blog/wp-content/uploads/2020/12/apple2.jpg" alt="" />
<h2>中央</h2>
<p>object-position 指定なし</p>
</div>
<div class="img-box">
<img class="left-top" src="https://fastcoding.jp/blog/wp-content/uploads/2020/12/apple2.jpg" alt="" />
<h2>左上</h2>
<p>object-position: 0 0</p>
</div>
<div class="img-box">
<img class="right-bottom" src="https://fastcoding.jp/blog/wp-content/uploads/2020/12/apple2.jpg" alt="" />
<h2>右下</h2>
<p>object-position: 100% 100%</p>
</div>
.img-box {
margin:20px;
}
.img-box img {
width: 200px;
height: 200px;
object-fit: cover;
}
.left-top {
object-position: 0 0;
}
.right-bottom {
object-position: 100% 100%;
}
/* Layout */
body {
display: flex;
justify-content: center;
font-family: sans-serif;
background-color:#FAD9D9;
}
h2 {
font-size: 1rem;
margin: 0px;
}
p {font-size:14px;}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.