ऐसा लगता है कि यह आसान होना चाहिए, लेकिन मुझे कुछ नहीं मिल रहा है।ब्राउज़र विंडो भरने के लिए एसवीजी छवि को कैसे स्केल करें?
मैं एक HTML पृष्ठ बनाना चाहता हूं जिसमें एक एकल एसवीजी छवि है जो स्वचालित रूप से ब्राउज़र विंडो को फिट करने के लिए स्केल करती है, बिना किसी स्क्रॉलिंग के और उसके पहलू अनुपात को संरक्षित करते समय।
उदाहरण के लिए, इस समय मेरे पास 1024x768 एसवीजी छवि है; यदि ब्राउजर व्यूपोर्ट 1 9 80x1000 है तो मैं चाहता हूं कि छवि 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>
हालांकि इस ब्राउज़र की पूरी चौड़ाई के लिए स्केलिंग है (एक विस्तृत लेकिन छोटी खिड़की के लिए) और ऊर्ध्वाधर स्क्रॉल उत्पादन है, जो कि मैं क्या नहीं है:
वर्तमान में मैं यह परिभाषित इसलिए की तरह है चाहते हैं।
मुझे क्या याद आ रही है?
, मैं इनलाइन चलती की कोशिश की शैली में एक सीएसएस शैली ब्लॉक के लिए शैली विशेषताएँ, और उसके बाद यह काम किया। मुझे नहीं पता कि यह एक फर्क क्यों पड़ा। (हालांकि मुझे अतिप्रवाह जोड़ने की आवश्यकता थी: छुपा - अन्यथा 4-पिक्सेल वर्टिकल स्क्रॉल था।) – Miral