Bagaimana cara menskalakan gambar SVG untuk mengisi jendela browser?

Question 1

Sepertinya ini seharusnya mudah, tetapi saya hanya tidak mendapatkan sesuatu.

Saya ingin membuat halaman HTML yang berisi gambar SVG tunggal yang secara otomatis menyesuaikan dengan jendela browser, tanpa scrolling apa pun dan dengan tetap mempertahankan rasio aspeknya.

Misalnya, saat ini saya memiliki gambar SVG 1024x768; jika viewport browser 1980x1000 maka saya ingin gambar ditampilkan pada 1333x1000 (isi secara vertikal, di tengah horizontal). Jika browser berukuran 800x1000 maka saya ingin menampilkannya pada 800x600 (isi secara horizontal, di tengah secara vertikal).

Saat ini saya telah mendefinisikannya seperti ini:

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

Namun ini meningkatkan hingga lebar penuh browser (untuk jendela lebar tapi pendek) dan menghasilkan pengguliran vertikal, yang bukan yang saya inginkan.

Apa yang saya lewatkan?

Question 2

Bagaimana tentang:

html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; bottom:0; left:0; right:0 }

Atau:

html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; left:0; height:100%; width:100% }

Saya memiliki contoh di situs saya yang menggunakan (secara kasar) teknik ini, meskipun dengan pengisi 5% di sekelilingnya, dan menggunakan position:absolutealih-alih position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

(Menggunakan position:fixedmencegah skenario kasus tepi yang sangat dari penautan ke jangkar sub-halaman di halaman, dan overflow:hiddendapat memastikan bahwa tidak ada bilah gulir yang pernah muncul (jika Anda memiliki konten tambahan.)

Answer 1

Sepertinya ini seharusnya mudah, tetapi saya hanya tidak mendapatkan sesuatu.

Saya ingin membuat halaman HTML yang berisi gambar SVG tunggal yang secara otomatis menyesuaikan dengan jendela browser, tanpa scrolling apa pun dan dengan tetap mempertahankan rasio aspeknya.

Misalnya, saat ini saya memiliki gambar SVG 1024x768; jika viewport browser 1980x1000 maka saya ingin gambar ditampilkan pada 1333x1000 (isi secara vertikal, di tengah horizontal). Jika browser berukuran 800x1000 maka saya ingin menampilkannya pada 800x600 (isi secara horizontal, di tengah secara vertikal).

Saat ini saya telah mendefinisikannya seperti ini:

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

Namun ini meningkatkan hingga lebar penuh browser (untuk jendela lebar tapi pendek) dan menghasilkan pengguliran vertikal, yang bukan yang saya inginkan.

Apa yang saya lewatkan?

Answer 2

Entah kenapa, saya mencoba memindahkan atribut gaya sebaris ke blok gaya CSS di kepala, dan setelah itu berhasil. Saya tidak tahu mengapa itu membuat perbedaan. (Meskipun saya memang perlu menambahkan overflow: hidden - jika tidak, ada scroll vertikal 4 piksel.)

Miral

Answer 3

175

Bagaimana tentang:

html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; bottom:0; left:0; right:0 }

Atau:

html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; left:0; height:100%; width:100% }

Saya memiliki contoh di situs saya yang menggunakan (secara kasar) teknik ini, meskipun dengan pengisi 5% di sekelilingnya, dan menggunakan position:absolutealih-alih position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

(Menggunakan position:fixedmencegah skenario kasus tepi yang sangat dari penautan ke jangkar sub-halaman di halaman, dan overflow:hiddendapat memastikan bahwa tidak ada bilah gulir yang pernah muncul (jika Anda memiliki konten tambahan.)

Phrogz
sumber

38

Dan +1 terlambat untuk meninggalkan tautan itu selama 2 tahun.

msanford

7

Perhatikan bahwa solusi ini bergantung pada viewBoxatribut.

ubershmekel

4

Kaitannya masih ada, hampir 4 tahun kemudian. Kerja bagus, @Phrogz!

Richard

10

Ya, terima kasih @Phrogz ... Dan kalau-kalau itu turun, saya membuat versi codepen

Jay

5

Dan +1 selama lebih dari 8 tahun

Sudhir Kaushik

Answer 4

38