이미지를 브라우저의 전체 화면 채우기(CSS)

이미지의 왜곡 없이 이미지가 브라우저의 화면을 채우도록 만드는 방법은 여러 가지가 있습니다. 다음은 이미지가 화면의 가로와 세로의 중앙에 놓이고 전체 화면을 채우도록 하는 간단한 CSS 코드입니다.

요소명 {
max-width: 100%;
max-height: 100%;
bottom: 0;
left: 0;
margin: auto;
overflow: auto;
position: fixed;
right: 0;
top: 0;
}
// Source: stackoverflow

브라우저의 화면 크기를 조정하면 자동으로 이미지가 왜곡 없이 조정됩니다. 위의 코드를 워드프레스의 전면 슬라이드에 응요해도 잘 작동되네요(상황에 따라 다를 수는 있습니다). 그리고 이 글에서는 jQuery를 사용하여 풀 페이지 백그라운드를 만드는 방법이 설명되어 있으니 참고하시기 바랍니다.

참고:

• 워드프레스 전면 페이지를 배경 이미지로 채우기