aspect-ratio
- 비율로 이미지, 비디오 크기 조절
- width, height 순으로 작성
- 한자리 숫자 작성시 width값이 되고 height는 1이 됨.
- auto 1/1 - 기본 비율을 가지고 있는 경우 기본 비율, 그렇지 않으면 지정 비율
- 값이 적용되지 않는 경우 : 고정된 width, height 값이 있는 경우
object-fit
- fill : 기본값. 비율 상관없이 가득 채움
- contain : 원본의 비율을 유지하면서 이미지 전체를 표시하지만 여백이 생김.
- cover : 원본의 비율을 유지하면서 부모 요소 전체를 채우지만 나머지 이미지가 잘려나감.
- none : 원본 사이즈. 크기 조절 x
- scale-down : none과 contain 중 이미지의 크기가 더 작아지는 값 선택
위치 정렬 object-position
이미지나 비디오의 원래 크기를 조정해 부모 요소를 기준으로 위치 정렬
{ object-position: 값 ; } x축, y축 순서로 작성
- center center === 50% 50% : 기본값.
'CSS' 카테고리의 다른 글
| [CSS] 그라디언트 gradient (0) | 2022.10.28 |
|---|---|
| [CSS] 배경 이미지 background-image, repeat, position, attachment, size (0) | 2022.10.27 |
| [CSS] 수열 선택자 - 의사 클래스 :first-child / :last-child / :nth-child(n) (0) | 2022.10.25 |
| [CSS] 블록 요소 정렬 float (0) | 2022.10.25 |
| [CSS] 포지션 노출 순위 z-index (0) | 2022.10.25 |