반응형
SVG 이미지를 확장하여 브라우저 창을 채우는 방법은 무엇입니까?
이것은 쉬운 일인 것 같지만, 나는 단지 무언가를 얻지 있습니다.
스크롤하지 않고 가로 세로 비율을 유지하면서 브라우저 창에 맞게 자동으로 크기가 조정되는 단일 SVG 이미지가 포함 된 HTML 페이지를 만들고 싶습니다.
예를 들어, 현재 1024x768 SVG 이미지가 있습니다. 브라우저 뷰포트가 1980x1000이면 이미지가 1333x1000으로 표시되기 때문에 (세로 채우기, 가로 가운데에 배치). 브라우저가 800x1000이면 800x600으로 표시하고 싶습니다 (가로로 채우고 세로로 가운데에 배치).
현재 다음과 같이 정의했습니다.
<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할 수있는 스크롤 막대가 추가 할 수 있습니다 (추가 콘텐츠가있는 경우).
참고 URL : https://stackoverflow.com/questions/5643254/how-to-scale-svg-image-to-fill-browser-window
반응형
'IT' 카테고리의 다른 글
| Xcode 4 : 콘솔을 어떻게 봅니까? (0) | 2020.09.16 |
|---|---|
| 단일 벡터의 모든 요소가 같은지 테스트 (0) | 2020.09.16 |
| 작동하지 않는 경우 내부 Windows 일괄 설정 (0) | 2020.09.16 |
| Pandas DataFrame에서 열을 이동하는 방법 (0) | 2020.09.16 |
| 두 개의 다른 데이터베이스 테이블에 조인을 사용할 수 있습니까? (0) | 2020.09.16 |