ऐसा लगता है कि यह आसान होना चाहिए, लेकिन मुझे अभी कुछ नहीं मिल रहा है।
मैं एक 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>हालाँकि यह ब्राउज़र की पूरी चौड़ाई (एक विस्तृत लेकिन छोटी खिड़की के लिए) तक फैला हुआ है और ऊर्ध्वाधर स्क्रॉलिंग का उत्पादन कर रहा है, जो मुझे नहीं चाहिए।
मैं क्या खो रहा हूँ?