object-position 콘텐츠 위치

See the Pen qBrKxvV by nilgi (@nilgi) on CodePen.

 

.op {
  width: 250px;
  object-fit: cover;
}

.op1 {
  width: 250px;
  object-fit: cover;
  object-position: 80% 100%; / x% y% 콘텐츠 위치 지정. 기본값 50% 50%
}

.op2 {
  width: 250px;
  object-fit: cover;
  object-position: 10% 100%;
}

.op3 {
  width: 250px;
  object-fit: cover;
  object-position: left bottom; / 방향을 이용할 수 있다.
}

.op4 {
  width: 250px;
  object-fit: cover;
  object-position: 200px 100px; / px을 써서 박스 밖으로 콘텐츠를 내 보낼 수 있다.
}