Bildbewegung außerhalb der Div

Question

Ich erstelle eine Website mit einem schwarzen Div in der Mitte der Seite, und wenn ich mit der Maus darüber fahre, dreht sich das Bild in der Mitte. Das Problem ist, dass ich das Bild zwar in ein Div einfüge, es jedoch außerhalb der Grenzen des Div liegt. Wie kann dieses Problem behoben werden? Das ist mein HTML-Code:

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 {
  Übergang: 0,5 s;
  maximale Höhe: 600px;
}

.drehen{
  transformieren: drehen (15 Grad);
  Position: absolut;
  oben: 0;
  links: 0;
}

.rotate-negative{
  transformieren: drehen(-5 Grad);
  Position: absolut;
  oben: 0;
  links: 0;
}

.top-image:hover{
    transformieren: rotieren (0 Grad);
    Übergang: 0,5 s;
    maximale Höhe: 620px;
}
#Container{
    Rand links: auto;
    Rand rechts: auto;
    Höhe: 500px;
    Breite: 30 %;
    Hintergrundfarbe: schwarz;
}

<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>

Ich möchte, dass das Bild innerhalb des Div platziert wird. Allerdings möchte ich die Eigenschaft „position“ nicht aus dem CSS entfernen, da dies das Design des Bildes in der Mitte zerstören würde. Was kann ich tun, um das Bild innerhalb des Div zu behalten, ohne das Attribut „Position“ zu entfernen?

Ich habe andere Fragen mit demselben Problem gesehen, aber sie haben mir nicht geholfen.

Answer 1

只需将position: relative添加到您的#container选择器中即可。这将使子元素相对于该元素进行定位。

如果需要，您还可以添加overflow:hidden来截断超出此元素范围的内容。不过，如果不需要，请将其删除。

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>