-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
캔버스 비율 조정
22.07.18 22:03 작성 조회수 399
0
혹시 캔버스 비율 조정하는거를 스크립트를 사용안하고
.sticky-elem-canvas > canvas {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100vh;
}
이렇게 height로 100vh해도 비율이 맞춰지는데
이렇게 사용해도 무리없을까요?
답변을 작성해보세요.
0
1분코딩
지식공유자2022.07.27
CSS로 height를 늘리는 것은 가로세로 비율이 유지되지 않고 그냥 늘리는 것이라서요(실제 픽셀 수도 늘어나지 않고 시각적으로만 늘어납니다), 그게 무방한 상황이라면 말씀대로 CSS로만 하셔도 되고 그게 아니라면 스크립트로 계산해주시면 됩니다.
jjin91
질문자2022.07.27
우선 답변 감사드립니다.
canvas도 img태그 처럼 width값을 따로 지정하지 않으면 height값에 따라 비율을 맞춰 늘어나는거로 알고 있는데 아닌가요? 실제로 강의내용처럼 자바스크립트로 했을때와 css로만 했을때 비율이 동일하게 보여서요
1분코딩
지식공유자2022.07.27
아! width를 설정하지 않고 height만 주면 말씀대로 동작하는게 맞습니다. css의 width나 height가 아닌, 캔버스 자체의 width와 height에 따라 연산하는 픽셀수가 결정되고 고해상도 이미지 표현을 위해서 픽셀수를 제어할 필요가 있는데, 그냥 보이는 크기만 조정하는거라면 말씀대로 하시는게 더 간단하고 좋은 방법같습니다!
답변 1