[Bootstrap] navbar + image full screen

Version imprimable

2 pièce(s) jointe(s)

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
Pièce jointe 203176
Quand le téléphone est vertical et bas c'est pas top le résultat.
Pièce jointe 203177

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:

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:

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,

08/03/2016, 14h24
Inikaam
Bonjour rockley,

La difficulté de ton cas est que tu ne peux pas faire en sorte que l'image prenne toute la taille de l'écran sans la déformer ou qu'elle déborde en dehors de l'écran. C'est normal, bien entendu.

Si tu veux pouvoir centrer ton image dans les 2 sens, un truc qui marche bien c'est ça :
Code:

1 2 3 4 5 6 7 .fix{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
Attention toutefois, il faut que tu limites la taille de ton élément avec des max-height et max-width si tu ne veux pas qu'il prenne toute la page. N'oublie pas non plus de passer l'élément parent en position: relative, sinon ton placement absolu se mettra n'importe où. J'aurais tendance à conseiller de mettre ces CSS sur ton image plutôt que sur son parent.

Pour la photo j'ai pas de réponse pour le moment par contre, j'imagine qu'il y a dans cordova (ou meteor par extension) un moyen de faire rebasculer la photo. Au pire je laisse à quelqu'un d'autre le soin de répondre pour ce cas ^^

Merci pour ta réponse inikaam,

En fait ce qu'il me faut c'est un navBar + un conteneur qui prends toute la place restante. Dans le conteneur juste une image responsive.

J'ai créé un compte sur le bootsnip et je bosse dessus actuellement.
Comme je n'arrive pas à trouver tout d'un coup, j'essaie de décomposer.
Pour l'image j'ai trouvé ça :

Code:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
(function ($) {
 
    $.fn.photoResize = function (options) {
 
        var element    = $("#myImg"), 
            defaults = {
                bottomSpacing: 10
            };
 
        $(element).load(function () {
            changePhotoHeight();
 
            $(window).bind('resize', function () {
                changePhotoHeight();
            });
        });
 
        options = $.extend(defaults, options);
 
        function changePhotoHeight() {
            var o = options, 
                photoHeight = $(window).height();
 
            $(element).attr('height', photoHeight - o.bottomSpacing);
        }
    };
 
}(jQuery));
 
 
/*
* Adjust some element's right and lower boundaries on browser window resize
* 
* @example: $('selector').shrinkToWindow();
*/
 
(function ($) {
    $.fn.shrinkToWindow = function (options) {
 
        var element = $("#myImg"),
        defaults = {
            bottomSpacing: 15,
            rightSpacing: 20,
            // remember initial picture size (used as maximum size)
            unscaledHeight: $(element).height(),
            unscaledWidth: $(element).width(),
        };
        options = $.extend(defaults, options);
 
        $(element).load(function () {
            changeDimensions();
        });
        // the load event is a bit tricky -- it seems to not fire if
        // the element has been loaded very fast... i.e. from the browser's cache.
        // Therefore we force dimension change even before any load event has
        // been received:
        changeDimensions();
        $(window).bind('resize', function () {
            changeDimensions();
        });
 
        function changeDimensions() {
            // again, we might have to load the picture, yet...
            if ( options.unscaledHeight == 0 ) {
                options.unscaledHeight = $(element).height();
                options.unscaledWidth = $(element).width();
            }   
            if ( options.unscaledHeight == 0 ) return;
 
            var maxDisplayHeight = $(window).height() - $(element).offset().top - options.bottomSpacing;
            var maxDisplayWidth  = $(window).width() - $(element).offset().left - options.rightSpacing;
            var desiredHeight = maxDisplayHeight < options.unscaledHeight ? maxDisplayHeight : options.unscaledHeight;
            var desiredWidth  = maxDisplayWidth  < options.unscaledWidth  ? maxDisplayWidth  : options.unscaledWidth;
            var currHeight = $(element).height();
            var currWidth  = $(element).width();
 
            if ( currHeight != desiredHeight || currWidth != desiredWidth ) {
                // keep aspect ratio
                if ( desiredHeight / options.unscaledHeight <= desiredWidth / options.unscaledWidth ) {
                    $(element).height(desiredHeight);
                    $(element).width(options.unscaledWidth * desiredHeight / options.unscaledHeight);
                } else {
                    $(element).height(options.unscaledHeight * desiredWidth / options.unscaledWidth);
                    $(element).width(desiredWidth);
                }
            }
        }
    };
 
}(jQuery));
 
$("#myImg").shrinkToWindow();

Code:

1
2
3
4
5
6
<div class="container">
	<div class="row">
		<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
	</div>
</div>
<img id="myImg" src="http://www.bostonbakesforbreastcancer.org/wp-content/uploads/2012/03/sun.jpg"></img>

On n'est plus en CSS mais bon, au moins ça fait ce que je veux avec mon image.
Je continue à m'arracher les cheveux. Je laisse le poste ouvert pour le moment. Quand j'aurai trouvé je donnerai ma solution.

Bonjour,

si l'image est juste "décorative", il vaut mieux la passer en background :
Code:

1 2 3 4 5 6 7 8 9 .fix { background: silver url(../pont.jpg) top center no-repeat; background-size: cover; /* l'image va COUVRIR toute la surface */ height: 88%; width:100%; position: relative; bottom: 0; }
Voir : background-size (voir la "compatibilités des navigateurs")

Malheureusement l'image n'est pas juste décorative :(

J'ai malgré tout trouvé plusieurs solution. Je les poste pour ceux qui aurai le même problème.

En JQ :

Code:

1
2
3
4
5
6
<div class="container">
	<div class="row">
		<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
	</div>
</div>
<img id="myImg" src="http://www.bostonbakesforbreastcancer.org/wp-content/uploads/2012/03/sun.jpg"></img>

Code:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
(function ($) {
 
    $.fn.photoResize = function (options) {
 
        var element    = $("#myImg"), 
            defaults = {
                bottomSpacing: 10
            };
 
        $(element).load(function () {
            changePhotoHeight();
 
            $(window).bind('resize', function () {
                changePhotoHeight();
            });
        });
 
        options = $.extend(defaults, options);
 
        function changePhotoHeight() {
            var o = options, 
                photoHeight = $(window).height();
 
            $(element).attr('height', photoHeight - o.bottomSpacing);
        }
    };
 
}(jQuery));
 
 
/*
* Adjust some element's right and lower boundaries on browser window resize
* 
* @example: $('selector').shrinkToWindow();
*/
 
(function ($) {
    $.fn.shrinkToWindow = function (options) {
 
        var element = $("#myImg"),
        defaults = {
            bottomSpacing: 15,
            rightSpacing: 20,
            // remember initial picture size (used as maximum size)
            unscaledHeight: $(element).height(),
            unscaledWidth: $(element).width(),
        };
        options = $.extend(defaults, options);
 
        $(element).load(function () {
            changeDimensions();
        });
        // the load event is a bit tricky -- it seems to not fire if
        // the element has been loaded very fast... i.e. from the browser's cache.
        // Therefore we force dimension change even before any load event has
        // been received:
        changeDimensions();
        $(window).bind('resize', function () {
            changeDimensions();
        });
 
        function changeDimensions() {
            // again, we might have to load the picture, yet...
            if ( options.unscaledHeight == 0 ) {
                options.unscaledHeight = $(element).height();
                options.unscaledWidth = $(element).width();
            }   
            if ( options.unscaledHeight == 0 ) return;
 
            var maxDisplayHeight = $(window).height() - $(element).offset().top - options.bottomSpacing;
            var maxDisplayWidth  = $(window).width() - $(element).offset().left - options.rightSpacing;
            var desiredHeight = maxDisplayHeight < options.unscaledHeight ? maxDisplayHeight : options.unscaledHeight;
            var desiredWidth  = maxDisplayWidth  < options.unscaledWidth  ? maxDisplayWidth  : options.unscaledWidth;
            var currHeight = $(element).height();
            var currWidth  = $(element).width();
 
            if ( currHeight != desiredHeight || currWidth != desiredWidth ) {
                // keep aspect ratio
                if ( desiredHeight / options.unscaledHeight <= desiredWidth / options.unscaledWidth ) {
                    $(element).height(desiredHeight);
                    $(element).width(options.unscaledWidth * desiredHeight / options.unscaledHeight);
                } else {
                    $(element).height(options.unscaledHeight * desiredWidth / options.unscaledWidth);
                    $(element).width(desiredWidth);
                }
            }
        }
    };
 
}(jQuery));
 
$("#myImg").shrinkToWindow();

En JS (de la part d'un collègue super doué et super sympa :)

Code:

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
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
	<head>
	<style type="text/css">
        *{margin:0;padding:0}
        body{overflow:hidden}
        </style>
	<script>
                window.onload = function(){
                        console.log('LOAD...');
                        var body = document.body;
                        var main = document.getElementById('main');
                        var imgInstance = main.children[0];
                        var ratioImgInit = imgInstance.clientWidth / imgInstance.clientHeight;
                        
                        body.onresize = function(){
                                var target = {width : window.innerWidth, height : window.innerHeight, ratio : window.innerWidth/window.innerHeight};
                                if (target.ratio > ratioImgInit){
                                        imgInstance.style.width = target.width + 'px';
                                        imgInstance.style.height = (target.width  / ratioImgInit) + 'px';
                                }else{
                                        imgInstance.style.width = (target.height * ratioImgInit) + 'px';
                                        imgInstance.style.height = target.height  + 'px';
                                }
                                var margintop = target.height - imgInstance.clientHeight  <0 ? target.height - imgInstance.clientHeight : 0;
                                var marginleft = target.width - imgInstance.clientWidth < 0 ? target.width - imgInstance.clientWidth: 0;
                                
                                imgInstance.style.marginTop = margintop+'px';
                                imgInstance.style.marginLeft = marginleft+'px';
                        };
                        body.onresize();
                };
        </script>
	</head>
	<body>
	<div id="main">
		<img src="img/img1.jpg" />
	</div>
	</body>
</html>

Et en CSS que j'ai trouvé comme un grand :)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<header>
    <nav class="navbar" id="headerNavBar">
      <a href="{{pathFor route='Profil'}}">
        <button type="button" class="btn navbar-btn pull-right">
          <span class="fa fa-user fa-lg"></span>
        </button>
      </a>
      <a href="{{pathFor route='Photo'}}">
        <button type="button" class="btn navbar-btn pull-right">
          <span class="fa fa-camera-retro fa-lg"></span>
        </button>
      </a>
      <a class="navbar-brand" href="{{pathFor route='accueil'}}" ><i class="fa fa-home fa-lg" style="color:#337ab7"></i></a>
    </nav>
  </header>
<div>
      <img src={{photo}} id="myImg" />
</div>

Code:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
*
{
  margin:0;
  padding:0;
}
body
{
  overflow:hidden
  background: blue;
}
 
 
header
{
  background: silver;
  position: relative;
  width: 100%;
 
}
 
header .btn
{
  background: silver;
  border: none;
  outline: none;
}
 
#headerNavBar
{
  margin-bottom : 0px;
  width: 100%;
}
 
#myDiv
{
  position: relative;
  background: black;
  /*Je n'ai pas poussé le vice plus loin en calculant la hauteur en pixel de l'élément navbar et en faisant un calc (100vh - NavBar_PX) => CSS3 uniquement si j'ai bien compris.*/
  height: 92vh;
  width: 100vw;
  /*centrer image horizontallement dans le div*/
  text-align: center;
  /*centrer image verticalement dans le div (les deux lignes qui suivent)*/
  display: table-cell;
  vertical-align: middle;
}
 
#myImg
{
  max-width: 100%;
  max-height: 100%;
}

Je problème du JQ c'est le fait que quand on tourne le téléphone plusieurs fois le resize bug parfois.
Je problème avec le code de mon collègue super cool c'est le crop sur l'images même si ça peux s'arranger assez facilement.
Du coup j'ai fini par choisir le CSS :)