[layout] SVG 이미지를 확장하여 브라우저 창을 채우는 방법은 무엇입니까?

Program / 글쓴이

이것은 쉬운 일인 것 같지만, 나는 단지 무언가를 얻지 못하고 있습니다.

스크롤하지 않고 가로 세로 비율을 유지하면서 브라우저 창에 맞게 자동으로 크기가 조정되는 단일 SVG 이미지가 포함 된 HTML 페이지를 만들고 싶습니다.

예를 들어, 현재 1024×768 SVG 이미지가 있습니다. 브라우저 뷰포트가 1980×1000이면 이미지가 1333×1000으로 표시되기를 원합니다 (세로 채우기, 가로 가운데에 배치). 브라우저가 800×1000이면 800×600으로 표시하고 싶습니다 (가로로 채우고 세로로 가운데에 배치).

현재 다음과 같이 정의했습니다.

<body style="height: 100%">
  <div id="content" style="width: 100%; height: 100%">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
         width="100%" height="100%"
         viewBox="0 0 1024 768"
         preserveAspectRatio="xMidYMid meet">
      ...
    </svg>
  </div>
</body>

그러나 이것은 브라우저의 전체 너비 (넓지 만 짧은 창)로 확장되고 세로 스크롤을 생성하며 이는 내가 원하는 것이 아닙니다.

내가 무엇을 놓치고 있습니까?

답변

어때 :

html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; bottom:0; left:0; right:0 }

또는:

html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; left:0; height:100%; width:100% }

나는 모든 약 5 %의 패딩 불구하고, (약)이 기술을 사용하고, 사용하여 내 사이트에 예를 들어이 position:absolute대신 position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

(사용 position:fixed하면 페이지의 하위 페이지 앵커에 연결하는 매우 극단적 인 시나리오를 방지 overflow:hidden할 수 있으며 스크롤 막대가 나타나지 않도록 할 수 있습니다 (추가 콘텐츠가있는 경우).

답변