Div外图像移动

Question

我正在创建一个网站，在网页的中心有一个黑色的div，当我将鼠标悬停在上面时，中心的图片会旋转。问题是，尽管我将图片放在了div中，但它却超出了div的范围。如何修复这个问题？这是我的HTML代码：

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

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

我希望图片被放置在div内部。但是，我不想从CSS中移除“position”属性，因为这会破坏图片在中心的设计。在不移除“position”属性的情况下，我该怎么做才能让图片保持在div内部呢？

我看到了其他有同样问题的问题，但它们没有帮助到我。

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>