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

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?

— Miral
source

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

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
source

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

— msanford

Notez que cette solution repose sur l' viewBoxattribut.

— ubershmekel

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

— Richard

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

— Jay

Et +1 depuis plus de 8 ans

— Sudhir Kaushik