Mouvement de l'image en dehors de Div

Question

Je crée un site Web avec un div noir au centre de la page et lorsque je le survole, l'image au centre pivote. Le problème est que même si je mets l’image dans un div, elle sort des limites du div. Comment régler ce problème? Voici mon code HTML :

const image = document.getElementById("pic");
image.classList.add("rotation");
const clone = image.cloneNode(true);
clone.classList.add("rotation-négative");
clone.classList.add("image supérieure");
clone.classList.add("shadow-lg");
document.getElementById("container").appendChild(clone);

img {
  transition : 0,5 s ;
  hauteur maximale : 600 px ;
}

.tourner{
  transformation : rotation (15 degrés) ;
  position : absolue ;
  haut : 0 ;
  gauche : 0 ;
}

.rotation-négative{
  transformation : rotation (-5 deg );
  position : absolue ;
  haut : 0 ;
  gauche : 0 ;
}

.top-image:survoler{
    transformation : rotation (0deg);
    transition : 0,5 s ;
    hauteur maximale : 620 px ;
}
#récipient{
    marge gauche : auto ;
    marge droite : auto ;
    hauteur : 500 px ;
    largeur : 30 % ;
    couleur de fond : noir ;
}</pré>
<pre class="brush:html;toolbar:false;"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css " rel="stylesheet" Integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">

<div id="conteneur">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcToJI-yx2dCcsVf3fYDDRF908iRO_dlTsL9H32iWWIkT_1dYuimsdBUZKTIZgYC61z6Vik&usqp=CAU" id="pic">
</div>

Je souhaite que l'image soit placée à l'intérieur du div. Cependant, je ne veux pas supprimer la propriété "position" du CSS car cela briserait la conception de l'image étant au centre. Que puis-je faire pour conserver l'image à l'intérieur du div sans supprimer l'attribut « position » ?

J'ai vu d'autres questions avec le même problème, mais elles ne m'ont pas aidé.

Answer 1

Mettez simplement position: relative添加到您的#container dans le sélecteur. Cela positionnera les éléments enfants par rapport à cet élément.

Si nécessaire, vous pouvez également ajouter overflow:hidden pour tronquer le contenu dépassant la portée de cet élément. Cependant, si vous n'en avez pas besoin, supprimez-le.

const image = document.getElementById("pic");
image.classList.add("rotate");
const clone = image.cloneNode(true);
clone.classList.add("rotate-negative");
clone.classList.add("top-image");
clone.classList.add("shadow-lg");
document.getElementById("container").appendChild(clone);

img {
  transition: 0.5s;
  max-height: 600px;
}

.rotate{
  transform: rotate(15deg);
  position: absolute;
  top: 0;
  left: 0;
}

.rotate-negative{
  transform: rotate(-5deg);
  position: absolute;
  top: 0;
  left: 0;
}

.top-image:hover{
    transform: rotate(0deg);
    transition: 0.5s;
    max-height: 620px;
}
#container{
    margin-left: auto;
    margin-right: auto;
    height: 500px;
    width: 30%;
    background-color: black;
    
    /*added*/
    position: relative;
    /*overflow:hidden;*/
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">

<div id="container">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcToJI-yx2dCcsVf3fYDDRF908iRO_dlTsL9H32iWWIkT_1dYuimsdBUZKTIZgYC61z6Vik&usqp=CAU" id="pic">
</div>