인프런 커뮤니티 질문&답변

jjin91님의 프로필 이미지
jjin91

작성한 질문수

애플 웹사이트 인터랙션 클론!

캔버스를 창 사이즈에 맞추기

캔버스 비율 조정

작성

·

581

0

혹시 캔버스 비율 조정하는거를 스크립트를 사용안하고

.sticky-elem-canvas > canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100vh;
}
 
이렇게 height로 100vh해도 비율이 맞춰지는데
이렇게 사용해도 무리없을까요?

답변 1

0

1분코딩님의 프로필 이미지
1분코딩
지식공유자

CSS로 height를 늘리는 것은 가로세로 비율이 유지되지 않고 그냥 늘리는 것이라서요(실제 픽셀 수도 늘어나지 않고 시각적으로만 늘어납니다), 그게 무방한 상황이라면 말씀대로 CSS로만 하셔도 되고 그게 아니라면 스크립트로 계산해주시면 됩니다.

jjin91님의 프로필 이미지
jjin91
질문자

우선 답변 감사드립니다. 

canvas도 img태그 처럼 width값을 따로 지정하지 않으면 height값에 따라 비율을 맞춰 늘어나는거로 알고 있는데 아닌가요? 실제로 강의내용처럼 자바스크립트로 했을때와 css로만 했을때 비율이 동일하게 보여서요

1분코딩님의 프로필 이미지
1분코딩
지식공유자

아! width를 설정하지 않고 height만 주면 말씀대로 동작하는게 맞습니다. css의 width나 height가 아닌, 캔버스 자체의 width와 height에 따라 연산하는 픽셀수가 결정되고 고해상도 이미지 표현을 위해서 픽셀수를 제어할 필요가 있는데, 그냥 보이는 크기만 조정하는거라면 말씀대로 하시는게 더 간단하고 좋은 방법같습니다!

jjin91님의 프로필 이미지
jjin91
질문자

아하 고해상도의 이미지를 표현하기 위해 필요한거군요! 감사합니다

jjin91님의 프로필 이미지
jjin91

작성한 질문수

질문하기