[M] 모바일 높이값

모바일에서 대부분 백그라운드로 이미지를 처리하는데, 백그라운드만 넣으면 높이값이 지정이 안되면 보이지 않는다.

이럴때 이미지의 가로*세로 비율을 계산해서 패딩으로 주는 방법이 있다.

(세로값/가로값)*100 = 패딩값

으로 계산해서 주면 된다.

예를들어 1000*500사이즈의 이미지가 있다면,

1 2 3

<style> .imgbox{width:100%; padding-bottom:50%; background-size:100%;} </style>

그러면 따로 높이값을 주지 않아도 이미지 비율에 맞추어 배경이 알맞게 들어간다.

이미지 비율이 깔끔하게 떨어지지 않을 경우에는 숫자를 줄여서 패딩값을 줘야 한다. 여백이 생길 수 있기 때문.

55.5555% -> 55.5%

67.678% -> 67.5% 등과 같이..

출처: http://noey424.tistory.com/34 [style.css :)]

모바일에서 대부분 백그라운드로 이미지를 처리하는데, 백그라운드만 넣으면 높이값이 지정이 안되면 보이지 않는다.

이럴때 이미지의 가로*세로 비율을 계산해서 패딩으로 주는 방법이 있다.

(세로값/가로값)*100 = 패딩값

으로 계산해서 주면 된다.

예를들어 1000*500사이즈의 이미지가 있다면,

1 2 3

<style> .imgbox{width:100%; padding-bottom:50%; background-size:100%;} </style>

그러면 따로 높이값을 주지 않아도 이미지 비율에 맞추어 배경이 알맞게 들어간다.

이미지 비율이 깔끔하게 떨어지지 않을 경우에는 숫자를 줄여서 패딩값을 줘야 한다. 여백이 생길 수 있기 때문.

55.5555% -> 55.5%

67.678% -> 67.5% 등과 같이..

출처: http://noey424.tistory.com/34 [style.css :)]

<style>

.imgbox{width:100%; padding-bottom:50%; background-size:100%;}

</style>

출처: http://noey424.tistory.com/34 [style.css :)]

[height/width]X100 = padding-bottom

CSS : .선택자{width:100%; padding-bottom:계산값; background-size:100%}

http://noey424.tistory.com/34