728x90
박스 요소의 가로 또는 세로의 길이가 px, rem 등 고정된 값이 아니라 %, vw, vh 등의 가변적인 값으로 설정되었을 때, 해당 요소의 가로 세로 비율을 정하는 방법
aspect-ratio
요소의 가로 세로 비율을 설정 (가로/세로)
aspect-ratio: 3/4; // -> 가로3:세로4
슬래시를 사용하지 않을 경우, 가로/1 로 자동 적용된다.
%는 사용불가
CSS aspect-ratio 속성 : 요소의 가로 세로 비율 설정 - 코딩에브리바디
aspect-ratio 속성은 이미지나 비디오 동영상, div 등 요소의 원하는 가로 세로 비율을 설정합니다. aspect-ratio 속성 사용법과 작동하지 않는 사례, 그리고 주의할 점에 대해 살펴보겠습니다.
codingeverybody.kr
728x90
'CSS' 카테고리의 다른 글
| [ Tailwind CSS ] Tailwind CSS를 여러 줄에 나눠써도 될까? (1) | 2024.11.12 |
|---|---|
| [ CSS ] 자식 요소의 width를 부모 요소의 width에 대한 비율로 정하고 싶을 때 (0) | 2024.06.21 |
| [ styled components ] keyframe 사용법 (0) | 2024.06.14 |
| [ CSS ] 동적인 높이를 가진 div에 세로 스크롤 생성 (0) | 2024.05.20 |
| [ CSS ] 조건부 class 지정 (0) | 2024.05.16 |
728x90
박스 요소의 가로 또는 세로의 길이가 px, rem 등 고정된 값이 아니라 %, vw, vh 등의 가변적인 값으로 설정되었을 때, 해당 요소의 가로 세로 비율을 정하는 방법
aspect-ratio
요소의 가로 세로 비율을 설정 (가로/세로)
aspect-ratio: 3/4; // -> 가로3:세로4
슬래시를 사용하지 않을 경우, 가로/1 로 자동 적용된다.
%는 사용불가
CSS aspect-ratio 속성 : 요소의 가로 세로 비율 설정 - 코딩에브리바디
aspect-ratio 속성은 이미지나 비디오 동영상, div 등 요소의 원하는 가로 세로 비율을 설정합니다. aspect-ratio 속성 사용법과 작동하지 않는 사례, 그리고 주의할 점에 대해 살펴보겠습니다.
codingeverybody.kr
728x90
'CSS' 카테고리의 다른 글
| [ Tailwind CSS ] Tailwind CSS를 여러 줄에 나눠써도 될까? (1) | 2024.11.12 |
|---|---|
| [ CSS ] 자식 요소의 width를 부모 요소의 width에 대한 비율로 정하고 싶을 때 (0) | 2024.06.21 |
| [ styled components ] keyframe 사용법 (0) | 2024.06.14 |
| [ CSS ] 동적인 높이를 가진 div에 세로 스크롤 생성 (0) | 2024.05.20 |
| [ CSS ] 조건부 class 지정 (0) | 2024.05.16 |
