18041 sujets

Questions générales et questions de débutants

[Résolu] Centrage de page HTML et adapter à toutes les dimensions d'éc

Bonjour à toutes et à tous.
D'avance merci de votre aide.
J'ai crée un fichier HTML pour un petit jeux avec photos pour mon ordinateur et mes amis .
Mon problème, je suis novice et je n'ai pas trouvé de code afin que ma page soit centrée automatiquement tant verticalement que horizontalement et que cette page soit plein écran quelque soit la taille de l'écran.
J'espère être compréhensible. D'avance merci de votre temps.
Ci-dessous mon code.


<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" />
<title>Mimes Bruno</title>

<script language="JavaScript" type="text/javascript">
//<![CDATA[


function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == "Stop") {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout("rotate()", rotate_delay);
 }
}
//  End -->


//]]>
</script>
<style type="text/css">
/*<![CDATA[*/


</body>
</html>

</style>
</head>
<body>
<div style="margin-left: 10em" id="menu_diaporama">
<form name="slideform">
<table cellspacing="1" cellpadding="4" bgcolor="#000000">
<tr>
<td align="center" bgcolor="#FFFC01"><font size="+3"><b>Photos-Mimes Bruno</b></font></td>
</tr>
<tr>
<td align="center" bgcolor="#DF15DD" width="1200" height="600"><img src="JPEG/logo.gif" name="show" alt="" /></td>
</tr>
<tr>
<td align="center" bgcolor="#FC0203"><select name="slide" onchange="change();">
<option value="JPEG/logo.gif">0</option>
<option value="JPEG/arraignee.jpg">1</option>
<option value="JPEG/baleine.jpg">2</option>
<option value="JPEG/bison.jpg">3</option>
<option value="JPEG/canard.jpg">4</option>
<option value="JPEG/castor.jpg">5</option>
<option value="JPEG/cerf.jpg">6</option>
<option value="JPEG/chat.jpg">7</option>
<option value="JPEG/cheval.jpg">8</option>
<option value="JPEG/chevre.jpg">9</option>
<option value="JPEG/chien.jpg">10</option>
<option value="JPEG/crabe.jpg">11</option>
<option value="JPEG/elephant.jpg">12</option>
<option value="JPEG/girafe.jpg">13</option>
<option value="JPEG/grenouille.jpg">14</option>
<option value="JPEG/otarie.jpg">15</option>
<option value="JPEG/pingouin.jpg">16</option>
<option value="JPEG/poule.jpg">17</option>
<option value="JPEG/rhinoceros.jpg">18</option>
<option value="JPEG/serpent.jpg">19</option>
<option value="JPEG/singe.jpg">20</option>
<option value="JPEG/tortue.jpg">21</option>
<option value="JPEG/acteur.jpg">22</option>
<option value="JPEG/agriculteur.jpg">23</option>
<option value="JPEG/animateur.jpg">24</option>
<option value="JPEG/boucher.jpg">25</option>
<option value="JPEG/boulanger.jpg">26</option>
<option value="JPEG/cameraman.jpg">27</option>
<option value="JPEG/cascadeur.jpg">28</option>
<option value="JPEG/carrossier.jpg">29</option>
<option value="JPEG/chanteur.jpg">30</option>
<option value="JPEG/chauffeur.jpg">31</option>
<option value="JPEG/chefdorchestre.jpg">32</option>
<option value="JPEG/coiffeur.jpg">33</option>
<option value="JPEG/couturier.jpg">34</option>
<option value="JPEG/cuisinier.jpg">35</option>
<option value="JPEG/docteur.jpg">36</option>
<option value="JPEG/macon.jpg">37</option>
<option value="JPEG/menuisier.jpg">38</option>
<option value="JPEG/photographe.jpg">39</option>
<option value="JPEG/plombier.jpg">40</option>
<option value="JPEG/poissonnier.jpg">41</option>
<option value="JPEG/soldat.jpg">42</option>
<option value="JPEG/alpiniste.jpg">43</option>
<option value="JPEG/badminton.jpg">44</option>
<option value="JPEG/baseball.jpg">45</option>
<option value="JPEG/billard.jpg">46</option>
<option value="JPEG/boxe.jpg">47</option>
<option value="JPEG/bowling.jpg">48</option>
<option value="JPEG/kayak.jpg">49</option>
<option value="JPEG/course.jpg">50</option>
<option value="JPEG/cyclisme.jpg">51</option>
<option value="JPEG/deltaplane.jpg">52</option>
<option value="JPEG/golf.jpg">53</option>
<option value="JPEG/pingpong.jpg">54</option>
<option value="JPEG/petanque.jpg">55</option>
<option value="JPEG/tiralarc.jpg">56</option>
<option value="JPEG/avion.jpg">57</option>
<option value="JPEG/ballon.jpg">58</option>
<option value="JPEG/bateau.jpg">59</option>
<option value="JPEG/brosseadents.jpg">60</option>
<option value="JPEG/camion.jpg">61</option>
<option value="JPEG/camionpompiers.jpg">62</option>
<option value="JPEG/canape.jpg">63</option>
<option value="JPEG/ceinture.jpg">64</option>
<option value="JPEG/chaise.jpg">65</option>
<option value="JPEG/chaussette.jpg">66</option>
<option value="JPEG/flipper.jpg">67</option>
<option value="JPEG/telephone.jpg">68</option>
<option value="JPEG/valise.jpg">69</option>
<option value="JPEG/accoucher.jpg">70</option>
<option value="JPEG/acheterquelqueschose.jpg">71</option>
<option value="JPEG/bronzer.jpg">72</option>
<option value="JPEG/changerunbebe.jpg">73</option>
<option value="JPEG/cueillirdescerises.jpg">74</option>
<option value="JPEG/compter.jpg">75</option>
<option value="JPEG/clouer.jpg">76</option>
<option value="JPEG/danserunslow.jpg">77</option>
<option value="JPEG/dormir.jpg">78</option>
<option value="JPEG/draguer.jpg">79</option>
<option value="JPEG/embrasser.jpg">80</option>
<option value="JPEG/espionner.jpg">81</option>
<option value="JPEG/fairelavaisselle.jpg">82</option>
<option value="JPEG/pleurer.jpg">83</option>
<option value="JPEG/sedeshabiller.jpg">84</option>
<option value="JPEG/semaquiller.jpg">85</option>
<option value="JPEG/sifler.jpg">86</option>
<option value="JPEG/signer.jpg">87</option>
<option value="JPEG/tondrelapelouse.jpg">88</option>
<option value="JPEG/etremalade.jpg">89</option>
<option value="JPEG/etendredulinge.jpg">90</option>
<option value="JPEG/accoucher.jpg">91</option>
<option value="JPEG/repasser.jpg">92</option>
<option value="JPEG/monteedecorde.jpg">101</option>
</select></td>
</tr>
</table>
</form>
</div>
</body>
</html>

Modifié par BruChri (11 Feb 2023 - 18:09)
pour une image plein écran adapdative:


.divfond {
position: fixed;
z-index: 1;
top: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.imgfull {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}

<div class="divfond">
        <img src="image.jpg" class="imgfull">
</div>

Modifié par drphilgood (11 Feb 2023 - 17:39)
Merci drphilgood.
Je place ce code à quel endroit dans mon fichier ?
Merci de ton aide .
Modifié par BruChri (11 Feb 2023 - 17:51)
comme çà


<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">

<style>
html, body {
margin: 0;
width: 100%;
}
.divfond {
position: fixed;
z-index: 1;
top: 0;
width: 100vw;
height:100vh;
}
.imgfull {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
</style>

</head>
<body>

<div class="divfond">
<img src="tonimage.jpg" class="imgfull">
</div>

</body>
</html>
ton image remplira toujours la fenetre du navigateur sans distorsion,
prévoit une grande image suffisante.
Modifié par drphilgood (11 Feb 2023 - 20:32)
Prévenir un modérateur
Répondre au sujet
Aller à