web-dev-qa-db-fra.com

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

Cela semble être facile, mais je ne reçois 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 en préservant ses proportions.

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

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

<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’adapte à 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?

layoutxhtmlsvgscalingaspect-ratio
83
Miral

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 en utilisant (à peu près) cette technique, bien qu'avec 5% de remplissage, et en utilisant position:absolute au lieu de position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

(Utilisation de position:fixed empêche un scénario très cas de liaison à une ancre de sous-page sur la page, et overflow:hidden peut s’assurer qu’aucune barre de défilement ne s’affiche (si vous avez du contenu supplémentaire.)

157
Phrogz