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

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

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

참고:

떠나시기 전에 아무 댓글(Comments)이라도 남겨주세요.