이미지 비율고정 - aspect-ratio : happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > CSS > 이미지 > 이미지 비율고정 - aspect-ratio 상세정보

클라우드태그

javascript

html

CSS

PHP

API

ASP

mysql

jquery

slide

image

메뉴

Mobile

게시판

현재접속자 명

이미지 비율고정 - aspect-ratio

해피팀

네티즌

소스분류

이미지

다운로드 횟수

0 회

간단설명

aspect ratio(종횡비)는 요소의 크기를 비율대로 조정할 수 있는 속성입니다. 너비를 300으로 지정하고 aspect-ratio:3/1을 하면 높이는 100px 이 됩니다.

평가하기

aspect-ratio는 종대비라고 하며 가로와 세로의 비율입니다.
가로가 100 / 세로 100이면 aspect-ratio는 1:1이되며

css로는 아래와같이 작성합니다.

.aaa{
aspect-ratio : 1/1
}

이를 이용하여 img, input[type="image"], video, embed, marquee, object, table

이렇게 다양한 태그가 가능합니다.

.aaa{
width:500px;
aspect-ratio:16/9;
background:#f40000;
}

위와같이 작성시 가로 500px크기의 16:9 박스가 만들어지게 됩니다.

https://developer.mozilla.org/en-US/docs/web/css/aspect-ratio
https://css-tricks.com/almanac/properties/a/aspect-ratio/

다양한 곳에서 관련 css를 확인 하실 수 있습니다.