CSS 객체 맞춤 속성
CSS object-fit
속성은 컨테이너에 맞게 <img> 또는 <video> 크기를 조정하는 방법을 지정하는 데 사용됩니다.
CSS 객체 맞춤 속성
CSS object-fit
속성은 컨테이너에 맞게 <img> 또는 <video> 크기를 조정하는 방법을 지정하는 데 사용됩니다.
이 속성은 콘텐츠에 다양한 방법으로 컨테이너를 채우도록 지시합니다. 예를 들어 "그 종횡비 유지" 또는 "늘어내고 가능한 한 많은 공간을 차지합니다."
파리의 다음 이미지를 보십시오. 이 이미지는 너비가 400픽셀이고 높이가 300픽셀입니다.
그러나 위의 이미지를 너비의 절반(200픽셀)과 높이(300픽셀)로 지정하면 다음과 같이 표시됩니다.
예시
img {
width: 200px;
height:
300px;
}
200x300 픽셀의 컨테이너에 맞게 이미지가 찌그러져 있는 것을 볼 수 있습니다(원래 종횡비가 파괴됨).
여기에서 object-fit
속성이 제공됩니다. object-fit
속성은 다음 값 중 하나를 사용할 수 있습니다.
fill
- 기본값입니다. 이미지는 주어진 치수를 채우도록 크기가 조정됩니다. 필요한 경우 이미지에 맞게 늘어나거나 찌그러집니다.contain
- 이미지는 종횡비를 유지하지만 주어진 치수에 맞게 크기가 조정됩니다.cover
- 이미지는 종횡비를 유지하고 주어진 치수를 채웁니다. 이미지에 맞게 잘립니다.none
- 이미지의 크기가 조정되지 않습니다.scale-down
- 이미지가 가장 작은 버전none
또는contain
개체 맞춤 사용: 덮개;
이미지를 사용 object-fit: cover;
하면 종횡비를 유지하고 주어진 치수를 채웁니다. 이미지는 다음과 같이 잘립니다.
예시
img {
width: 200px;
height:
300px;
object-fit: cover;
}
개체 맞춤 사용: 포함;
이미지를 사용 object-fit: contain;
하면 종횡비가 유지되지만 주어진 치수에 맞게 크기가 조정됩니다.
예시
img {
width: 200px;
height:
300px;
object-fit: contain;
}
개체 맞춤 사용: 채우기;
이미지를 사용 object-fit: fill;
하면 주어진 치수를 채우도록 크기가 조정됩니다. 필요한 경우 이미지가 다음과 같이 늘어나거나 찌그러집니다.
예시
img {
width: 200px;
height:
300px;
object-fit: fill;
}
개체 맞춤 사용: 없음;
이미지 크기가 조정되지 않은 경우 object-fit: none;
:
예시
img {
width: 200px;
height:
300px;
object-fit: none;
}
개체 맞춤 사용: 축소;
우리가 사용 하는 경우 이미지는 또는 object-fit: scale-down;
의 가장 작은 버전으로 축소됩니다 .none
contain
예시
img {
width: 200px;
height:
300px;
object-fit: scale-down;
}
또 다른 예
여기에 두 개의 이미지가 있고 브라우저 창의 50% 너비와 높이의 100%를 채우길 원합니다.
다음 예에서는 를 사용하지 object-fit
않으므로 브라우저 창의 크기를 조정할 때 이미지의 종횡비가 파괴됩니다.
예시
다음 예에서는 를 사용 object-fit: cover;
하므로 브라우저 창의 크기를 조정할 때 이미지의 종횡비가 유지됩니다.
예시
CSS object-fit 더 많은 예
다음 예는 object-fit
한 예에서 가능한 모든 속성 값을 보여줍니다.
예시
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
CSS 개체-* 속성
다음 표에는 CSS object-* 속성이 나열되어 있습니다.
Property | Description |
---|---|
object-fit | Specifies how an <img> or <video> should be resized to fit its container |
object-position | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |