화면 크기 만큼 이미지를 꽉 채우고 이미지가 클 경우 스크롤이 생기게 하는 예제

29 Nov 2021

Reading time ~1 minute

화면 크기 만큼 이미지를 꽉 채우고 이미지가 클 경우 스크롤이 생기게 하는 예제

GO CODESENDBOX

이미지를 div tag로 감싸서 처리하면 쉽게 될 줄 알았는데 스크롤이 생기기 위해서는 height, width의 크기가 있어야 합니다.

작성한 예제는 top, left, right, bottom을 0으로 주어서 크기를 잡아 처리 했습니다.

작성한 예제

<body style="overflow: hidden;">
    <div
      style="
        overflow: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      "
    >
      <img
        src="https://images.hdqwalls.com/wallpapers/rocks-water-body-4k-ax.jpg"
      />
    </div>
  </body>