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 tout en conservant son format.
Par exemple, j’ai actuellement une image SVG 1024×768; Si la fenêtre du navigateur est 1980×1000, je souhaite que l’image soit affichée à 1333×1000 (remplissez verticalement, centré horizontalement). Si le navigateur était 800×1000 alors je veux qu’il affiche à 800×600 (remplir horizontalement, centré verticalement).
Actuellement je l’ai défini ainsi:
...
Cependant, cela prend 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?
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 (approximativement) cette technique, mais avec 5% de remplissage tout autour et en utilisant la position:absolute
au lieu de la position:fixed
:
http://phrogz.net/svg/svg_in_xhtml5.xhtml
(L’utilisation de position:fixed
empêche un scénario très complexe de liaison à une ancre de sous-page sur la page et le overflow:hidden
peut garantir qu’aucune barre de défilement n’apparaisse jamais (au cas où vous avez du contenu supplémentaire).