Comment redimensionner l'image SVG pour remplir la fenêtre du navigateur?

Question 1

Cela semble devoir être facile, mais je n'obtiens simplement rien.

Je souhaite créer une page HTML contenant une seule image SVG qui s'adapte automatiquement à la fenêtre du navigateur, sans aucun défilement et tout en préservant son rapport hauteur / largeur.

Par exemple, pour le moment, j'ai une image SVG 1024x768; si la fenêtre du navigateur est de 1980x1000, je veux que l'image s'affiche à 1333x1000 (remplir verticalement, centrée horizontalement). Si le navigateur était de 800x1000, je veux qu'il s'affiche à 800x600 (remplir horizontalement, centré verticalement).

Actuellement, je l'ai défini comme ceci:

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

Cependant, cela s'étend à toute la largeur du navigateur (pour une fenêtre large mais courte) et produit un défilement vertical, ce qui n'est pas ce que je veux.

Qu'est-ce que je rate?

Question 2

Que diriez-vous:

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

Ou:

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

J'ai un exemple sur mon site utilisant (à peu près) cette technique, mais avec un rembourrage de 5% tout autour, et en utilisant à la position:absoluteplace de position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

(L'utilisation position:fixedempêche un scénario très marginal de lien vers une ancre de sous-page sur la page, et overflow:hiddenpeut garantir qu'aucune barre de défilement n'apparaîtra (au cas où vous auriez du contenu supplémentaire).

Answer 1

Cela semble devoir être facile, mais je n'obtiens simplement rien.

Je souhaite créer une page HTML contenant une seule image SVG qui s'adapte automatiquement à la fenêtre du navigateur, sans aucun défilement et tout en préservant son rapport hauteur / largeur.

Par exemple, pour le moment, j'ai une image SVG 1024x768; si la fenêtre du navigateur est de 1980x1000, je veux que l'image s'affiche à 1333x1000 (remplir verticalement, centrée horizontalement). Si le navigateur était de 800x1000, je veux qu'il s'affiche à 800x600 (remplir horizontalement, centré verticalement).

Actuellement, je l'ai défini comme ceci:

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

Cependant, cela s'étend à toute la largeur du navigateur (pour une fenêtre large mais courte) et produit un défilement vertical, ce qui n'est pas ce que je veux.

Qu'est-ce que je rate?

Answer 2

Inexplicablement, j'ai essayé de déplacer les attributs de style en ligne vers un bloc de style CSS dans la tête, et après cela, cela a fonctionné. Je ne sais pas pourquoi cela a fait une différence. (Bien que j'aie eu besoin d'ajouter le débordement: caché - sinon il y avait un défilement vertical de 4 pixels.)

Miral

Answer 3

175

Que diriez-vous:

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

Ou:

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

J'ai un exemple sur mon site utilisant (à peu près) cette technique, mais avec un rembourrage de 5% tout autour, et en utilisant à la position:absoluteplace de position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

(L'utilisation position:fixedempêche un scénario très marginal de lien vers une ancre de sous-page sur la page, et overflow:hiddenpeut garantir qu'aucune barre de défilement n'apparaîtra (au cas où vous auriez du contenu supplémentaire).

Phrogz
la source

38

Et un +1 tardif pour avoir quitté ce lien 2 ans plus tard.

msanford

7

Notez que cette solution repose sur l' viewBoxattribut.

ubershmekel

4

Le lien est toujours là, près de 4 ans plus tard. Bon travail, @Phrogz!

Richard

10

Oui, merci @Phrogz ... Et juste au cas où ça tomberait jamais, j'ai fait une version codepen

Jay

5

Et +1 depuis plus de 8 ans

Sudhir Kaushik

Answer 4

38