Taille div pour s'adapter à un élément particulier

Question

J'essaie de recadrer automatiquement une image pour l'insérer derrière une toile (http://webglworkshop.com/js-test.html).

J'ai un div qui contient une toile et une image, et le code CSS ci-dessous:

div.carouselContainer { 
    height: 300px; 
    border: 5px solid blue; 
    overflow: hidden; 
} 

.webgl { 
    position: absolute; 
    top: 10px; 
    border: 5px solid green; 
} 

.backgroundImage { 
    display: inline; 
} 

Cela fonctionne d'une certaine façon, mais je dois utiliser une valeur height codée en dur dans div.carouselContainer.

Je voudrais supprimer la propriété height et avoir la div automatiquement redimensionnée pour s'adapter à la toile seulement.

Est-ce possible sans utiliser la propriété background et sans utiliser JS?

TIA

Answer 1

Vous pouvez retirer le position: absolute de la toile, et placez-le sur l'image à la place. Cela permet de déterminer la hauteur du conteneur en fonction de la hauteur du canevas, et l'image sera découpée par le overflow: hidden sur le conteneur.

Answer 2

Vous pouvez supprimer la balise img et utiliser l'image en tant qu'attribut d'image d'arrière-plan sur la div carouselContainer afin que la taille de l'image n'influence pas la taille div.

HTML:

<div class="carouselContainer"> 
    <canvas width="1505" height="393" class="webgl webgl-head" style="width: 1505px; height: 393.3px;"></canvas> 
</div> 

CSS:

div.carouselContainer { 
    background-image: url(code/img/milky.jpg); 
    background-position-y: 90%; 
} 

/* .webgl removed */ 

Ajustez la position de fond avec un fond en position-y. Si vous devez déplacer la toile, vous pouvez utiliser margin-top ou padding-top maintenant.