Div の外での画像の移動

Question

ページの中央に黒い div がある Web サイトを作成しています。その上にマウスを置くと、中央の画像が回転します。問題は、画像を div 内に配置したにもかかわらず、div の境界の外に出てしまうことです。この問題を解決するにはどうすればよいでしょうか?これは私の HTML コードです:

const image = document.getElementById("pic");
image.classList.add("回転");
const clone = image.cloneNode(true);
clone.classList.add("回転ネガティブ");
clone.classList.add("トップイメージ");
clone.classList.add("shadow-lg");
document.getElementById("コンテナ").appendChild(clone);

img {
  トランジション: 0.5秒。
  最大高さ: 600ピクセル;
}

.回転{
  変換: 回転(15 度);
  位置: 絶対;
  トップ: 0;
  左: 0;
}

.rotate-negative{
  変換: 回転(-5度);
  位置: 絶対;
  トップ: 0;
  左: 0;
}

.top-image:ホバー{
    変換: 回転(0度);
    トランジション: 0.5秒。
    最大高さ: 620ピクセル;
}
＃容器{
    マージン左: 自動;
    マージン右: 自動;
    高さ: 500ピクセル;
    幅: 30%;
    背景色: 黒;
}

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

<div id="コンテナ">
  <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

#container セレクターに position:relative を追加するだけです。これにより、この要素を基準にして子要素が配置されます。

必要に応じて、 overflow:hidden を追加して、この要素の範囲を超えたコンテンツを切り詰めることもできます。ただし、不要な場合は削除してください。

リーリー リーリー リーリー