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