Bonjour,

Je suis développeur mais niveau intégration je me rends compte que je pêche pas mal pour ne pas dire que je suis une grosse ... .

Je que je veux faire est simple. Afficher un navbar et une image full screen en dessous. Cela fera bientôt une semaine que je m'arrache les cheveux et que je ne trouve pas. Peu importe le nombre de code que je copie/colle et qui devrait marcher. Je n'arrive jamais au résultat que je souhaite.

Ce que je veux c'est développer un écran pour mobile.
- L'image doit toujours être centré horizontalement et verticalement.
- L'image doit s'afficher d'un bloque. Je veux dire par là que je ne dois avoir ni scrolling horizontal ni vertical. En gros c'est comme aller dans galerie de son téléphone et afficher une image.

Pour test mes pages j'utilise l'émulateur RIPPLE sous Chrome.
Voici le résultat que j'ai actuellement :

Quand le téléphone est horizontal je doit scroller pour voir le bas de l'image
Nom : Capture du 2016-03-07 19:25:19.png Affichages : 1716 Taille : 221,6 Ko
Quand le téléphone est vertical et bas c'est pas top le résultat.
Nom : Capture du 2016-03-07 19:24:58.png Affichages : 1802 Taille : 192,9 Ko

Un autre problème que je n'arrive pas à résoudre est l’orientation de l'image. Je prends un selfy sur mon téléphone, je récupère l'image, et quand j'affiche le résultat, l'image est couché sur le côté.

J'utilise le framework METEOR pour faire mes dév.
Voici mon code actuel :


Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<header>
    <nav class="navbar navbar-inverse" id="headerNavBar">
      <div class="container">
        <div class="navbar-header">
          <a href="{{pathFor route='secondLayout'}}">
            <button type="button" class="navbar-toggle">
              <span class="fa fa-user fa-fw"></span>
            </button>
          </a>
          <a href="{{pathFor route='pint'}}">
            <button type="button" class="navbar-toggle">
              <span class="fa fa-camera-retro fa-fw"></span>
            </button>
          </a>
          <a class="navbar-brand" href="{{pathFor route='accueil'}}" ><i class="fa fa-home fa-fw" style="color:blue"></i></a>
        </div>
      </div>
    </nav>
  </header>
 
<body>
  <div id='yieldTest'>
     <section class="main">
       <div class="fix">
            <img src="/pont.jpg" class="img-responsive">
       </div>
     </section>
  </div>
</body>


Et le CSS qui va avec :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
#yieldTest
{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width:100%;
  height:100%;
}
 
#headerNavBar
{
  background: silver;
  font-size: 10px;
  margin-bottom : 1px;
}
 
.fix
{
  background: silver;
  height: 88%;
  width:100%;
  position: relative;
  bottom: 0;
}

J'ai vraiment besoin de votre aide et de votre accompagnement pour comprendre comment marchent les choses dans le monde du développement mobile.
Merci d'avance,