1485 sujets

Web Mobile et responsive web design

Problème responsive image dans un container

Bonjour,

J'ai un soucis avec une div qui ne joue pas son rôle de container. C'est un format très spécifique donc je vais essayer de faire simple.

J'ai une div avec une image en background. Elle est redimensionnée automatiquement grâce à background-size: contain;
Mais là ou je bloque c'est que la div enfant contient elle même une image en background (avec une animation spécifique, que j'ai enlevé pour que se soit plus simple). Je souhaiterais qu'elle se cale sur la div parent. Mais comme j'influe sur le background logiquement ça n'influe pas sur la cadre mais seulement sur le font.

Je pense que je ne résonne pas de la bonne façon. Smiley sweatdrop Voici le petit bout de code: 


<body>
    <div id="container">
		<div id="test" ></div>
	</div>
</body>



#container {
    position: absolute;
    margin: auto;  
    width: 100%;
    height: 100%;
    background-image: url(test.png); 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;    
}

#test {
    background-image: url(test2.png);
    background-size: 100% 100%; 
}


Voila je voudrais récupérer l'effet du contain mais de façon a influer sur la taille de ma div container.
J’espère que je suis claire.

Merci pour votre aide. Smiley smile
Bonjour.

Freyya a écrit :

Voila je voudrais récupérer l'effet du contain mais de façon a influer sur la taille de ma div container.
J’espère que je suis claire.


Non, pas trop.

La div enfant est bien à l'intérieur de la div parent ; elle donne l'impression de dépasser car le background de la div parent est en contain, il ne remplit pas la totalité de la div parent (100% de la largeur de l'écran).

Smiley smile
Oui c'est bien ce que je recherche que mon image ne prenne pas toute la taille de la fenêtre mais un max soit en width soit en height.

Mon image fait 1024*768 et le but est qu'elle conserve ses proportions. Donc que des marges se forment automatiquement soit sur la hauteur soit sur la largeur.

Mais ma div enfant elle se déforme pour prendre toute la taille de la fenêtre elle ne se cale pas sur le parent. Smiley biggrin

Désolé de ne pas être très clair j'ai moi même du mal avec cette demande très particulière Smiley confused
Modifié par Freyya (22 Dec 2016 - 15:05)
Freyya a écrit :

Mais ma div enfant elle se déforme pour prendre toute la taille de la fenêtre elle ne se cale pas sur le parent. Smiley biggrin

Non, la div enfant ne se déforme pas, seulement l'image du background dont le background-size est en 100% 100%, le ratio n'est pas conservé.

Il faut que vous appliquiez des contraintes de proportions soit sur la div parent soit sur la div enfant si vous voulez que la div enfant ne prenne pas toute la largeur de l'écran.

Smiley smile
Oui je comprends, merci.

Néanmoins je ne sais pas trop comment je vais faire ça Smiley smile car si j'enlève les contraintes à l'enfant mon background ne s'affiche plus. Smiley sweatdrop
Modifié par Freyya (22 Dec 2016 - 22:56)
Sujet clos
Aller à