ব্রাউজার উইন্ডোটি পূরণ করতে কীভাবে এসভিজি চিত্রটি স্কেল করবেন?


94

এটি সহজ হওয়া উচিত বলে মনে হচ্ছে তবে আমি কিছু পাচ্ছি না।

আমি একটি একক এসভিজি চিত্রযুক্ত একটি HTML পৃষ্ঠা তৈরি করতে চাই যা ব্রাউজার উইন্ডোতে কোনও স্ক্রলিং ছাড়াই এবং এর অনুপাতের অনুপাত সংরক্ষণ করার সময় স্বয়ংক্রিয়ভাবে স্কেল করে।

উদাহরণস্বরূপ, এই মুহূর্তে আমার কাছে একটি 1024x768 এসভিজি চিত্র রয়েছে; যদি ব্রাউজারের ভিউপোর্টটি 1980x1000 হয় তবে আমি চিত্রটি 1333x1000 এ প্রদর্শিত করতে চাই (অনুভূমিকভাবে অনুভূমিকভাবে পূরণ করুন) tered যদি ব্রাউজারটি 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 পিক্সেল উল্লম্ব স্ক্রোল ছিল))
মিরাল

উত্তর:


175

কেমন:

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% }

আমার সাইটে এই কৌশলটি ব্যবহার করে (মোটামুটিভাবে) চারপাশে ৫% প্যাডিং ব্যবহার করে এবং এর position:absoluteপরিবর্তে ব্যবহার করে আমার একটি উদাহরণ রয়েছে position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

(ব্যবহারের position:fixedফলে পৃষ্ঠার উপ-পৃষ্ঠার অ্যাঙ্করের সাথে সংযোগ স্থাপনের খুব প্রান্তের পরিস্থিতি প্রতিরোধ করা হয়েছে এবং overflow:hiddenএটি নিশ্চিত করতে পারে যে কোনও স্ক্রোল বার কখনই উপস্থিত না হয় (যদি আপনার অতিরিক্ত সামগ্রী থাকে তবে))


39
এবং এই লিঙ্কটি 2 বছর অবধি রেখে দেওয়ার জন্য +1 দেরী।
মিশনফোর্ড

7
নোট করুন যে এই সমাধানটি viewBoxবৈশিষ্ট্যের উপর নির্ভর করে ।
উবারশ্মেকেল

4
লিঙ্কটি হল এখনও আছে, প্রায় 4 বছর পরে। ভাল কাজ, @ ফ্রোগজ!
রিচার্ড

11
হ্যাঁ, ধন্যবাদ @ ফ্রোগজ ... এবং যদি এটি কখনও কমে না যায়, আমি একটি কোডপেন সংস্করণ তৈরি করেছি: codepen.io/cyanos/full/XbXxOQ
জয়

7
এবং 8 বছরেরও বেশি সময় ধরে +1 করুন
সুধীর কৌশিক
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.