如何让绝对定位图片不超出父div容器？（保留position属性）

问题描述 #

页面中央有一个黑色div容器，内部图片设置了绝对定位和旋转效果，但旋转后图片会超出容器范围，需要保留position属性的同时让图片始终处于容器内。

解决方案 #

只需对容器和图片的CSS做3处关键调整：

• 给容器添加position: relative：让绝对定位的图片以容器为定位基准，避免相对于页面定位导致偏移。
• 给容器添加overflow: hidden：自动裁剪超出容器边界的图片部分。
• 调整图片的定位与尺寸：
  • 用top: 50%; left: 50%; transform: translate(-50%, -50%)实现容器内居中，旋转时也能保持在容器范围内。
  • 添加max-width: 100%; max-height: 100%限制图片最大尺寸不超过容器。

修改后的完整代码 #

HTML #

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

CSS #

img {
  transition: 0.5s;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rotate{
  transform: translate(-50%, -50%) rotate(15deg);
}

.rotate-negative{
  transform: translate(-50%, -50%) rotate(-5deg);
}

.top-image:hover{
    transform: translate(-50%, -50%) rotate(0deg);
    transition: 0.5s;
}

#container{
    margin-left: auto;
    margin-right: auto;
    height: 500px;
    width: 30%;
    background-color: black;
    position: relative;
    overflow: hidden;
}

JS #

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

内容的提问来源于stack exchange，提问作者Mohammad Sajjad Baqri