จะปรับขนาดภาพ SVG ให้เต็มหน้าต่างเบราว์เซอร์ได้อย่างไร?


94

ดูเหมือนว่ามันควรจะง่าย แต่ฉันไม่ได้รับบางสิ่ง

ฉันต้องการสร้างหน้า HTML ที่มีรูปภาพ SVG เพียงรูปเดียวที่ปรับขนาดให้พอดีกับหน้าต่างเบราว์เซอร์โดยอัตโนมัติโดยไม่ต้องเลื่อนใด ๆ และยังคงรักษาอัตราส่วนไว้

ตัวอย่างเช่นในขณะนี้ฉันมีภาพ 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>

อย่างไรก็ตามนี่เป็นการปรับขนาดความกว้างเต็มของเบราว์เซอร์ (สำหรับหน้าต่างกว้าง แต่สั้น) และทำให้เกิดการเลื่อนในแนวตั้งซึ่งไม่ใช่สิ่งที่ฉันต้องการ

ฉันขาดอะไรไป?


อธิบายไม่ถูกฉันลองย้ายแอตทริบิวต์สไตล์อินไลน์ไปยังบล็อกสไตล์ CSS ในส่วนหัวและหลังจากนั้นก็ใช้งานได้ ฉันไม่รู้ว่าทำไมมันถึงสร้างความแตกต่าง (แม้ว่าฉันจะต้องเพิ่ม overflow: hidden - มิฉะนั้นจะมีการเลื่อนในแนวตั้ง 4 พิกเซล)
Miral

คำตอบ:


178

เกี่ยวกับ:

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สามารถมั่นใจได้ว่าจะไม่มีแถบเลื่อนปรากฏขึ้น (ในกรณีที่คุณมีเนื้อหาเพิ่มเติม)


41
และ +1 ในช่วงปลายสำหรับการออกจากลิงก์นั้นในเวลา 2 ปี
msanford

7
โปรดทราบว่าโซลูชันนี้อาศัยviewBoxแอตทริบิวต์
ubershmekel

4
ลิงก์ยังคงอยู่ที่นั่นเกือบ 4 ปีต่อมา ทำได้ดีมาก @Phrogz!
Richard

11
ใช่ขอบคุณ @Phrogz ... และในกรณีที่มันดับลงฉันได้สร้าง codepen เวอร์ชัน: codepen.io/cyanos/full/XbXxOQ
Jay

7
และ +1 มานานกว่า 8 ปี
Sudhir Kaushik
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.