Une image centrée sur une page html

J'essaie d'écrire une page html dans laquelle je peux placer n'importe quelle URL d'image, et elle affiche cette image avec un fond noir, centré verticalement et horizontalement sur la page.Une image centrée sur une page html

J'ai ceci:

<html> 
<body style="background: black;"> 

<img src="http://i.imgur.com/n8o1E.png" style="display: block; margin: auto; max-height: 100%; max-width: 100%"> 

</body> 
</html>

Ce qui fait le bon emploi pour les images qui sont plus grands et plus minces que la page, mais il ne se centre pas les choses à la verticale. Comment puis-je faire ceci?

Source

2012-12-08 user1624005

text-align: center – Sohail

<html> 
<head> 
<style> 
html, body, #wrapper { 
     height:100%; 
     width: 100%; 
     margin: 0; 
     padding: 0; 
     border: 0; 
    } 
    #wrapper td { 
     vertical-align: middle; 
     text-align: center; 
    } 
</style> 
</head> 
<body> 
    <table id="wrapper"> 
     <tr> 
     <td><img src="logo.png" alt="" /></td> 
     </tr> 
    </table> 
</body> 
</html>

Source

2012-12-08 07:30:53 Moiz

Cela fonctionne pour les images plus courtes que la fenêtre, mais lorsqu'elles sont plus grandes, elles ne sont pas plus grandes. Je ne sais pas pourquoi. – user1624005

pour cela vous devez redimensionner l'image par jquery. Voici le lien. http://davejay.exit42design.com/entry/Design/44/ – Moiz

ou se référer à ce poste. http://stackoverflow.com/questions/13232247/resize-image-to-fit-in-a-div-keep-ratio-centered-horizontally-and-vertically – Moiz

Une image centrée sur une page html

Répondre

Questions connexes