Cela semble comme il devrait être facile, mais je suis tout simplement pas obtenir quelque chose.
Je veux faire une page HTML contenant une seule image SVG qui s'adapte automatiquement pour s'adapter à la fenêtre du navigateur, sans le défilement et tout en conservant ses proportions.
Par exemple, en ce moment j'ai une image SVG, résolution de 1024x768; si le navigateur de la fenêtre d'affichage est 1980x1000 alors je veux l'image à afficher à 1333x1000 (à remplir à la verticale, centrée horizontalement). Si le navigateur a été 800x1000 alors je le veux pour un affichage en 800x600 (remplissage 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 c'est la mise à l'échelle jusqu'à la totalité de la largeur du navigateur (pour une large mais courte fenêtre) et la production de défilement vertical, ce qui n'est pas ce que je veux.
Ce qui me manque?
