Div の外での画像の移動
<p>ページの中央に黒い div がある Web サイトを作成しています。その上にマウスを置くと、中央の画像が回転します。問題は、画像を div 内に配置したにもかかわらず、div の境界の外に出てしまうことです。この問題を解決するにはどうすればよいでしょうか?これは私の HTML コードです: </p>
<pre class="brush:js;toolbar:false;">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);</pre>
<pre class="ブラシ:css;ツールバー:false;">img {
トランジション: 0.5秒。
最大高さ: 600ピクセル;
}
.回転{
変換: 回転(15 度);
位置: 絶対;
トップ: 0;
左: 0;
}
.rotate-negative{
変換: 回転(-5度);
位置: 絶対;
トップ: 0;
左: 0;
}
.top-image:ホバー{
変換: 回転(0度);
トランジション: 0.5秒。
最大高さ: 620ピクセル;
}
＃容器{
マージン左: 自動;
マージン右: 自動;
高さ: 500ピクセル;
幅: 30%;
背景色: 黒;
}</pre>
<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 PtmoHDEXupvnDJzQIu9"crossorigin="anonymous">
<div id="コンテナ">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcToJI-yx2dCcsVf3fYDDRF908iRO_dlTsL9H32iWWIkT_1dYuimsdBUZKTIZgYC61z6Vik&usqp=CAU" id="pic">
</div></pre>
<p>画像をdiv内に配置したいのですが。ただし、中央にある画像のデザインが崩れてしまうため、CSS から「position」プロパティを削除したくありません。 「position」属性を削除せずに画像を div 内に保持するにはどうすればよいですか? </p>
<p><em><strong>同じ問題に関する他の質問も見ましたが、役に立ちませんでした。 </strong></em></p>
