요소의 패딩을 백분율로 지정하여 가로 세로 비율을 유지할 수 있습니다.
이를 위해 CSS 패딩 속성을 사용하십시오 -
-
하단 패딩 요소의 아래쪽 패딩을 지정합니다.
-
패딩 탑 요소의 상단 패딩을 지정합니다.
-
왼쪽 여백 요소의 왼쪽 패딩을 지정합니다.
-
오른쪽 여백 요소의 오른쪽 패딩을 지정합니다.
-
패딩 앞의 속성에 대한 약칭 역할을 합니다.
예시
다음 예는 종횡비를 유지하기 위한 CSS 패딩 속성을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
padding-top: 100%;
box-shadow: 0 0 24px steelblue;
position: relative;
width: 100%;
}
div > div {
margin: 10px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
}
</style>
</head>
<body>
<p>Watch the below div</p>
<div id="demo">
<div>Fun Ratio!</div>
</div>
</body>
</html> 출력
이것은 다음 결과를 생성합니다 -
창 크기를 조정한 후에도 화면 비율은 1:1로 유지됩니다.
예시
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 10%;
padding-top: 56.25%;
height: 0px;
position: relative;
box-shadow: 0 0 0 20px antiquewhite;
}
iframe {
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div>
<iframe src="https://www.youtube.com/embed/0cwk9UMLnWE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-inpicture" allowfullscreen></iframe>
</div>
</body>
</html> 출력
이것은 다음 결과를 생성합니다 -
