CSS를 이용해 aspect-ratio로 가로 세로의 비율은 유지하면서 창의 너비가 짧으면 너비에 맞게, 높이가 짧으면 높이에 맞게 div 박스의 크기를 조절하는 방법이다.
위 이미지와 같이 div가 하나의 이미지인 것처럼 화면의 가로, 세로 중 짧은 쪽에 맞춰지게 할 것이다.
자바스크립트 없이 CSS로만 할 수 있다. CSS의 min() 함수와 aspect-ratio, vw, vh값을 사용하면 된다. aspect-ratio는 해당 요소의 비율을 고정한다. vw와 vh는 각각 화면의 가로와 세로 길이를 100%라고 가정하고 비례한 값을 나타낸다.
/* 16:9 비율 유지 예시 */
.child-wrapper {
aspect-ratio: 16/9;
width: min(100vw, 100vh * 16 / 9);
}
가로와 세로 중 더 짧은 길이에 맞춰지기 때문에 스크롤 없이 비율을 계속 유지할 수 있다.
해당 요소를 가운데로 정렬하기 위해 부모 요소에 'display: flex;' 속성을 부여하고 세로 길이를 100vh로 설정한다.
.parent-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}가운데 말고 위나 옆에 정렬하고 싶으면 flex 설정을 바꾸면 된다.
See the Pen Responsively change div size keeping aspect ratio with CSS by kimcyan (@kimcyan) on CodePen.
min()을 활용하여 화면 크기에 따라 글자 크기, 이미지 크기, 위치 등도 자동으로 조절되게 할 수 있다. 사전에 디자인 작업을 진행할 때 기준이 되는 웹 화면에 맞추어 작업한 후 vh와 vw 값을 계산하면 된다.
(예) 1920*1080을 기준으로 디자인 작업을 진행했을 때 이미지 크기가 400px이어야 하는 경우
→ 400/1920*100 = 20.83, 400/1080*100 = 37.04 이므로 min(20.83vw, 37.04vh)로 설정한다. 계산기를 쓰기 귀찮으면 calc()를 활용한다.
모든 이미지를 이렇게 넣으려니까 귀찮아서 정말 필요한 거 아니면 그냥 화면 크기에 맞춰 배경 투명한 이미지로 넣었다. PNG 대신 WEBP을 파일 쓰면 용량도 작기 때문에 크게 부담스럽지 않다.
일러스트 작품으로 전자책 같은 페이지를 만들고 싶어서 찾아보게 되었다.
CSS는 계산 관련 함수만 몇 개 알고 있었는데 최솟값과 최댓값을 구하는 함수도 있는 줄 몰랐다. 미디어 아트나 반응형 웹으로 다양한 화면에서 같은 경험을 주고 싶을 때 유용할 것 같다.
※참고: https://stackoverflow.com/questions/65864203/how-to-make-div-element-auto-resize-maintaining-aspect-ratio
0 댓글