Image aux proportions de ma div [Résolu]

[link.80]

Bonjour,

Petit souci pour coder la maquette de mon futur site internet.
Un peu d'aide de votre part serait vraiment le bienvenu.

J'aimerais faire un site de hauteur et largeur adaptable à la résolution de l'écran.

Voici un visuel de ce que j'aimerais, je pense que ça sera plus simple à comprendre. J'aimerais que l'image à l’intérieur de la div#image s'étire (en gardant les proportions).

http://www.developpez.net/forums/att...v/website.jpg/

voici mon code html :

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
<header>
    <ul>
        <li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
    </ul>
</header>
 
<div id="wrapper">
 
        <nav>
            <ul>
                <li>sous-menu1</li>
                <li>sous-menu2</li>
                <li>sous-menu3</li>
            </ul>
        </nav> 
 
        <section id="contenu">
            <p>Etiam scelerisque, nunc ac egestas consequat.Quisque commodo hendrerit lorem quis egestas. 
               Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. 
               Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. 
               Donec semper quam scelerisque tortor dictum gravida.</p>      
        </section>
 
        <div id="image">      
        <img src="webimages/bg.jpg" id="bg" alt="" >
        </div>
 
</div>

et mon css :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
header  {background:#95c2ca;font:28px'QuicksandBold',Arial,sans-serif;color:#FFF;height:90px;position:relative;}
header ul li {float:left;margin-right:10px;}
 
nav {background:url(../webimages/bg_left.png) no-repeat;width:170px;height:500px;position:absolute;left:0px;}
 
#bg {position: absolute;top:0;left:0;z-index:-1;}
.bgwidth  {width:100%;}
.bgheight {height:100%;}
 
/* STRUCTURE */
#wrapper {}
#image   {background:#03F;margin:0 400px 0 0px;}
#contenu {background:#FC0;width:400px;position:absolute;right:0px;}

Avec un bout de code Javascript j'ai l'image qui prend toute la largeur de l'écran et ne prend pas en compte les 400px de large de ma div#contenu :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 var theWindow        = $(window),
            $bg              = $("#bg"),
            aspectRatio      = $bg.width() / $bg.height();
        function resizeBg() {
                if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
                    $bg
                        .removeClass()
                        .addClass('bgheight');
                } else {
                    $bg
                        .removeClass()
                        .addClass('bgwidth');
                }
        }
        theWindow.resize(function() {
                resizeBg();
        }).trigger("resize");

Merci d'avance pour votre aide !!
Salutations et bonne journée

[jreaux62]

Bonjour,
c'est du jquery qu'il te faut, pour recalculer dynamiquement les dimensions.

Je t'ai cuisiné ca aux petits oignons :

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
	<!-- Script jquery : initialisation -->
	<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery.min.js"></script>
	<!-- Script jquery -->
	<script type="text/javascript">
	$(document).ready(function () {
		var theWindow       = $(window); // fenetre courante
		function resizeBg() {
			var contenu         = $("#contenu");   // contenu a droite
			var bg             	= $("#bg");   // l image elle-meme
			var imgwidth        = bg.width();
			var imgheight       = bg.height();
			var aspectRatio     = imgwidth / imgheight;
//alert('avant : imgwidth : '+imgwidth+' - imgheight : '+imgheight+' - aspectRatio : '+aspectRatio);
			imgwidth        = Math.round((theWindow.width()-contenu.width()));
			imgheight       = Math.round((theWindow.width()-contenu.width())/aspectRatio);
			bg.width(imgwidth+'px');
			bg.height(imgheight+'px');
//alert('apres : imgwidth : '+imgwidth+' - imgheight : '+imgheight);
		}
		theWindow.resize(function() {
				resizeBg();
		}).trigger("resize");
	});
	</script>

Par contre, le css des balises html5 ne fonctionne pas du tout sur I.E.8,
Et pas correctement sur Firefox ou Safari.

[link.80]

Hello jreaux,

Merci beaucoup pour ton aide, c'est vraiment sympa !

Autre question, concernant ma div#contenu, j'ai de la peine a laisser la hauteur libre à 100% pour que la colonne occupe toute la page. Je n'y suis pas arrivé en CSS. Faudrait il aussi faire cela en javascript à ton avis ?

Concernant les balises HTML5, je n'ai pas mis dans le css que j'ai collé sur le forum les display:block ainsi que le lien pour le script :http://html5shim.googlecode.com/svn/trunk/html5.js

J'ai testé sur les différents navigateurs et versions de navigateurs, ton code fonctionne très bien, super sympa de ta part

[jreaux62]

Ajouter (à la fin de la fonction resizeBg()) :

Code :

1
2
3
4
			// contenu : meme hauteur que image
			if(imgheight>contenu.height()) {
				contenu.height(imgheight+'px');
			}

[link.80]

Merci pour ton aide.

Le code que tu m'a donné fonctionne, mais j'ai des comportement étranges.

Je pense que c'est a cause du header de 90px de haut ainsi qu'a l'accordéon...

Il semblerait que le site soit toujours plus grand que les 100% de haut. Du coup j'ai le scroll sur le navigateur qui apparait pour rien. Lorsque le contenu sur la droite est plus long que la hauteur de mon écran, le scroll ne va pas jusqu'en bas et pas possible de voir la fin du texte.

Également, en fonction de la résolution d'écran, les colonnes de mon accordéon ne vont pas jusqu'en bas de la page après avoir scrollé, c'est vraiment étrange.

C'est assez difficile à expliquer, donc je pense qu'un lien sera plus clair pour te rendre compte : http://lelixir.webhop.net:8888/test/

J'ai mis les css, le javascript et le html sur la même page pour facilier la compréhension, tu peux donc visualiser la source de la page pour te faire une idée...

Merci encore de ton aide précieuse !

Salutations

[jreaux62]

Envoyé par link.80

J'ai mis les css, le javascript et le html sur la même page pour facilier la compréhension, tu peux donc visualiser la source de la page

bien vu

Peux-tu préciser clairement :
- quels problèmes exactement ? + ce qui devrait être bon ?
- sur quel(s) navigateur(s) ? (IE ?)

[link.80]

Le site réagit presque pareil sur IE-7-8/Firefox6/Opera/Chrome, je pense pas que ce soit un souci de navigateur...

Lorsque le contenu texte est plus long que les 100% de ma page, le scroll n'est pas suffisant afin de pouvoir visualiser tout le texte qui se trouve dans #contenu

Si je met moins de texte j'ai également un scroll qui vient se mettre alors que j'aimerais que la hauteur fasse 100%, il devrait donc pas y avoir de scroll...

on est d'accord pour dire que la hauteur de la page devrait se calquer automatiquement en fonction de la hauteur du plus long contenu dans mon accordéon ?

(essaye de redimensionner la fenêtre de ton navigateur, et d'actualiser, tu te rendra mieux compte du souci je pense)

[Atomya Rise]

Bonjour,

Afin de mettre un background qui s'élargisse selon la taille de l'écran, il y a bien une "solution" en html/css
Le soucis, est que cela prends énormément de ressource mais sur IE très sincèrement, je ne sais plus si cela fonctionne....

A tester..

Code html :

1
2
3
4
5
6
7
 
<body>
<img src="ton_image" class="bg" />
<div id="contenu">
blablabla
</div>
</body>

Code css :

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
 
img { border: 0px none; }
 
img.bg {
	min-height: 100%;
	min-width: 1024px;
	width: 100%;
	height: 0%;
	position: fixed;
	top: 0%;
	left: 0%;
}
@media screen and (max-width: 1024px){
	img.bg {
		left: 50%;
		margin-left: -512px; 
	}
}
#contenu {
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center top;
	width: 100%;
	position: relative;
	top: 0px;
	margin: 0px;
	padding-top: 0px;
}

[Atomya Rise]

hummmm il me semble que j'ai une colonie de train en retard ^^ désolé.. je me suis arrêté a ton screen....

[link.80]

Salut Atomya Rise,

Merci pour la réponse mais ce n'est pas ce dont j'ai besoin. L'image doit s'adapter a la div et non au background. (en passant la solution donnée plus haut par jreaux62 fonctionne très bien !)

Pour ce qui est du background, j'ai vu pas mal de solutions sur le net avec des bout de code javascript qui fonctionnent très bien
ex: http://srobbin.com/jquery-plugins/jq...kstretch/#demo
http://bavotasan.com/demos/fullbg/

[jreaux62]

Envoyé par link.80

la hauteur de la page devrait se calquer automatiquement en fonction de la hauteur du plus long contenu dans mon accordéon

ca, c'est ce que tu voudrais obtenir.

MAIS, en CSS, height:100%; -> se "fixe" à 100% de la hauteur de la FENETRE. Pas plus, pas moins.

Actuellement,
- la hauteur de l'accordéon ne s'adapte pas automatiquement à la quantité de texte qu'il contient (d'ailleurs : "s'adapter à quel texte, de quel onglet ?" puisqu'il y a plusieurs onglets dans le menu)
- et même avec une hauteur fixée, aucune barre de scroll n'apparait dans le menu ...

[link.80]

Bonjour,

Grâce à la précieuse aide de jreaux62, que je remercie encore au passage, je suis arrivé à ça : http://lelixir.webhop.net:8888/test/

ça me parait être un bon compromis...

j'ai juste encore un petit souci avec le navigateur Opera, qui fait réagir bizarrement mon accordéon. Dans mon code, ligne 48, j'ai pourtant rajouté cela pour le support de la rotation sous Opera:

-o-transform: rotate(-90deg);
-o-transform-origin:550px 550px;
-o-top:0px;

mais sur ce navigateur les barres verticales servant a naviguer sont positionnées bizarrement.

qqun aurait une idée ?

D'avance merci !

[jreaux62]

Tu as limité l'affichage à la hauteur de la fenêtre, passé l'accordéon au dessus du header, et conservé le scroll pour les textes.
Bien vu
C'est exactement ce que j'aurais fait

J'avais testé sur IE, Firefox, Chrome et Safari, mais pas sur Opera.

[Edit] en effet, bizarre sur Opera...

[jreaux62]

Après de nombreux essais :

Code :

/* Opera */ -o-transform: rotate(-90deg); -o-transform-origin:0 0; top:100%;

Ca semble fonctionner avec tous les navigateurs (IE, Firefox, Safari, Chrome, Opera)

[link.80]

excellent !!!


Merci encore infiniment pour toute ton aide, sujet résolu !