画像
object-fit
画像の伸縮を指定
| value | description |
|---|---|
fill default | 画像を領域のサイズに合わせて変形させて表示します |
contain | 画像全体が領域内に収まるように配置されます。縦横比によっては余白が生じますが、必ず画像全体が表示されます。 |
cover | 全体が画像で覆われるように配置されます。余白が生じませんが、画像の一部が切り取られる場合があります。 |
Demo
<div class="wrapper">
<div class="box box-1">
<img src="/maritozzo.png" alt="" />
</div>
<div class="box box-2">
<img src="/maritozzo.png" alt="" />
</div>
<div class="box box-3">
<img src="/maritozzo.png" alt="" />
</div>
</div>
.box-1 > img {
object-fit: fill;
width: 100%;
height: 100%;
}
.box-2 > img {
object-fit: contain;
width: 100%;
height: 100%;
}
.box-3 > img {
object-fit: cover;
width: 100%;
height: 100%;
}
.box-1 {
border: 1px solid rgb(107, 107, 107);
border-radius: 12px;
}
.box-2 {
border: 1px solid rgb(107, 107, 107);
border-radius: 12px;
}
.box-3 {
border: 1px solid rgb(107, 107, 107);
border-radius: 12px;
}
.box {
height: 150px;
background: rgb(109, 113, 119, 0.3);
}
.wrapper {
display: grid;
gap: 8px;
grid-template-columns: repeat(3, 1fr);
}
概要
画像の伸縮を指定します。contain, coverの 2 つのプロパティを押さえておけば良いでしょう。
containは画像の縦横比によらず全体を表示させたいとき、coverは余白を作らず領域いっぱいに画像を表示させたいときに利用します。
注意事項
coverを指定する場合、<img>のwidth, heightを指定する必要があります。指定しない場合、<img>要素が親要素をはみ出してしまう場合があります。
親要素のサイズに合わせたい場合は、width, heightに100%を指定します。
関連
- 関連