[ CSS ] 이미지 비율 설정 aspect-ratio

2024. 6. 21. 09:01· CSS
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
'CSS' 카테고리의 다른 글
  • [ Tailwind CSS ] Tailwind CSS를 여러 줄에 나눠써도 될까?
  • [ CSS ] 자식 요소의 width를 부모 요소의 width에 대한 비율로 정하고 싶을 때
  • [ styled components ] keyframe 사용법
  • [ CSS ] 동적인 높이를 가진 div에 세로 스크롤 생성
ZoD
ZoD
바쁘게 굴러가는 ZoD의 하루~
ZoD
como siempre
ZoD
  • 분류 전체보기 (173)
    • Daily (0)
    • Javascript (16)
      • 모던 자바스크립트 (46)
    • Typescript (8)
    • FrontEnd (7)
    • React (21)
      • tanstack query (1)
      • 라이브러리 (3)
    • Vue (33)
      • Nuxt (11)
      • Quasar (6)
    • CSS (12)
    • Storybook (8)
    • Figma (3)
    • CS 지식 (5)
    • Network (5)
    • 알고리즘 (2)
    • 사이드 프로젝트 (4)
      • ddangkong (4)
      • boncierge (0)
    • 개발, 근데 이제 헛소리를 곁들인 (1)
    • ETC (2)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

인기 글

최근 글

hELLO · Designed By 정상우.v4.2.2
ZoD
[ CSS ] 이미지 비율 설정 aspect-ratio
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.