1
จะปรับขนาดภาพ SVG ให้เต็มหน้าต่างเบราว์เซอร์ได้อย่างไร?
ดูเหมือนว่ามันควรจะง่าย แต่ฉันไม่ได้รับบางสิ่ง ฉันต้องการสร้างหน้า 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> อย่างไรก็ตามนี่เป็นการปรับขนาดความกว้างเต็มของเบราว์เซอร์ (สำหรับหน้าต่างกว้าง แต่สั้น) …