원하는 비율로 영역 유지하기

length-1·2023년 11월 23일

CSS3

목록 보기
5/5

16:9 비율로 박스 유지하기

.wrapper {
	width:200px;
}
.wrapper .item {
	width:100%;
	height:0;
	padding-top:56.25%;
}

16:9 비율로 박스 유지하기 - 응용

.wrapper {
	width:1920px;
	height:0;
	margin-top:calc(1920px * 9 / 16 - 2);
}

2:1 비율로 박스 유지하기

.wrapper {
	width:200px;
}
.wrapper .item {
	width:100%;
	height:0;
	padding-top:50%;
}
profile
Frontend Study Blog

0개의 댓글