CSS 이미지 전체화면 띄우기

HTML을 이용해서 화면을 배치할때 이미지를 가운데로 배치하고 싶을 경우 사용하는 방법입니다. 이미지 태그를 사용하여 이미지를 배치하는 경우 부모태그에 의해서 배치가 의도하는 데로 동작을 안하는 경우가 있습니다.

 

특히 이미지 배치의 경우 문제가 되는부분이 가로, 세로의 정렬 부분인데요. 의외로 CSS 초보인 경우 이부분에 문제를 많이 겪고 있으신분들이 많이 있습니다.

 

타이틀이미지

 

 

간단한 방법은 아래와 같으며 내용은 하나하씩 설명을 드리겠습니다.

 

클래스이름 { 
max-width: 100%; 
max-height: 100%; 
left: 0; 
right: 0; 
top: 0; 
bottom: 0; 
margin: auto; 
overflow: auto; 
position: fixed; 
}

 

원본 이미지 크기를 그대로 표시하기 위해서 max-width:100%, max-height:100% 를 사용하였습니다.

max 태그의 경우 나타낼 수 있는 가장 큰 이미지 사이즈를 나타내기 때문에 화면 해상도 보다 이미지 사이즈가 크다면 화면을 꽉 차게 나타내게 됩니다. 유동형 이미지일 경우에 max를 사용하는 것이죠.

 

left, right, top, bottom 의 위치를 0으로 잡아줌으로서 다른 요건에 의해 영향을 안 받도록 하였습니다. 

 

margin : auto; 의 경우 엘리멘트를 가운데로 나타낼때 자주 사용하는 방법으로서 margin: 0 auto; 의 방법으로 공식처럼 많이 사용합니다.

 

overflow : auto; 오버플로우 태그는 화면이 겹쳐질경우 처리하는 방법으로서 이미지가 영역을 넘어갈경우 동작을 하게 됩니다. 

 

position :fixed; 화면을 가운데로 고정함으로서 이미지의 위치를 정 가운데로 고정을 시킵니다.

 

자, 그럼 사용방법은 아래와 같습니다.

 

<img src="이미지 경로" class = "test_class"/>



<style>

.test_class{  
max-width: 100%;  
max-height: 100%;  
left: 0;  
right: 0;  
top: 0;  
bottom: 0;  
margin: auto;  
overflow: auto;  
position: fixed;  
}

</style>

 

간단하게 설명을 드렸으며, 잘 응용하셔서 다양하게 사용해보세요. 위의 코드는 전체가 필요한 것은 아니며, 속성 태그에 따라서 제대로 동작을 안할 수도 있습니다.