28172 sujets

CSS et mise en forme, CSS3

Dimensions identiques pour 2 siblings responsive

Bonjour,

voici ma problématique :

J'ai une image qui doit faire 30% de la hauteur de la page.
sur cette image je dois poser dessus un div absolute qui aurait les mêmes dimensions de l'image.


sur internet, j'ai trouvé ce lien :
http://stackoverflow.com/questions/26515643/make-div-inherit-height-of-sibling-img-possible
le hic, c'est que dans mon cas, le width et le height de l'image ne sont pas connu.



actuellement , le div qui devrait avoir la même width que l'image (#stuff), fait 100% de la page du navigateur ... : 
#holder {
    position: relative;
    display: inline-block;

    height: 30%;
    width: auto;
}

#stuff {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    
    background: red;
    opacity: 0.5;
}



	
<div id="holder">
    	<img style="max-width:100%;max-height:100%;" src='img.png'>
    	<div id="stuff">waffle</div>
</div>
ce code fonctionnerais plutôt bien, si je voulais dimensionner sur un pourcentage de la largeur.
comme ceci :
https://jsfiddle.net/8dgz99rw/1/

je ne peux vous envoyer un exemple avec jsfiddle (pour le pourcentage en hauteur), car le comportement du site jsfiddle est différent de mon test sur une simple page html.

Merci pour votre aide.
et si tu enlevais ces vieux trucs pourris "__display: inline-block"

EDIT: je veux dire par là qu'en "display: inline-block" ça marche
Modifié par Zelalsan (28 Apr 2015 - 16:36)
en écrivant : height: 30%; dans #holder

voilà ce que j'obtiens sur Mozilla :
upload/58583-pb.png

Sur Chrome, j'obtiens un résultat différent mais guère mieux.


Remarque :

si j'enleve le inline-block : le largeur de #stuff va jusqu'au bord droit de la fenêtre (donc on est d'accord que ça ne correspond pas à mon besoin).

si je laisse display: inline-block;
sur Mozilla, la largeur de #stuff est égale à la largeur totale de l'image
sur Chrome, la largeur de #stuff est égale à 30% de l'image (ce que je veux).

Dans les 2 cas, quand je redimensionne la fenêtre, la largeur de #stuff reste inchangé et ne suis donc pas les dimensions de l'image.
Sujet clos
Aller à