Spear — Learn to Code

Docs/CSS/Object Fit

CSS Object Fit

Mengontrol bagaimana konten media (img, video) mengisi kontainernya.

cover — mengisi penuh, crop jika perlu (paling umum)
contain — tampilkan semua, mungkin ada ruang kosong
fill — stretch untuk mengisi (default, bisa distorsi)
none — ukuran asli
scale-down — pilih yang terkecil antara none dan contain

style.css

.of-box {
  width:150px;
  height:100px;
  border:2px solid #e2e8f0;
  border-radius:8px;
  display:inline-block;
  margin:4px;
}
.of-box img {
  width:100%;
  height:100%;
}
.of-label {
  text-align:center;
  font-size:12px;
  font-weight:bold;
}

← Previous

Filters

Width & Height