풀화면 이미지의 비율의 경우

코딩할때 풀화면의 이미지를 삽입할 시 적당한 이미지 넓이를 모르는 경우라면

보통 화면에는 1920 사이즈 이고

좀더 크면 2000 ~ 2200 정도 되는데

보통은 1920 사이즈로 한다.

이미지의 높이는 상황에 따라 맟추면 된다.

 

ex)

height: 600px;

background: url(../) no-repeat center top / cover;

cover를 사용하면

너비는 전체를 다 채우되 높이는 커버를 해주어

브라우저를 줄여도 이미지가 600px 미만으로 줄어들지 않는다.

 

ex1)

100%를 줄 경우

height: 600px;

background: url(../) no-repeat center top / 100%;

브라우저의 크기를 줄일경우

이미지 높이가 600px 이하까지 줄어든다.

 

ex2)

100%, 100% 를 줄 경우

height: 600px;

background: url(../) no-repeat center top / 100% 100%;

이미지가 찌그러버린다.

 

참고)

/ (슬레시)를 쓰는 이유

만약 숫자로 설정할경우 어떤게 포지션이고 사이즈인지 분별이 안간다. (100% 0 / 100%)

포지션 / 사이즈