Div外影像移動
P粉004287665
2023-08-13 15:21:15
<p>我正在建立一個網站，在網頁的中心有一個黑色的div，當我將滑鼠懸停在上面時，中心的圖片會旋轉。問題是，儘管我將圖片放在了div中，但它超出了div的範圍。如何修復這個問題？這是我的HTML程式碼：</p>
<pre class="brush:js;toolbar:false;">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);</pre>
<pre class="brush:css;toolbar:false;">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;
}</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 PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<div id="container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcToJI-yx2dCcsVf3fYDDRF908iRO_dlTsL9H32iWWIkT_1dYuimsdBUZKTIZg 661"
</div></pre>
<p>我希望圖片被放置在div內部。但是，我不想從CSS中移除“position”屬性，因為這會破壞圖片在中心的設計。在不移除「position」屬性的情況下，我該怎麼做才能讓圖片保持在div內部呢？ </p>
<p><em><strong>我看到了其他有相同問題的問題，但它們沒有幫助到我。 </strong></em></p>
只需將
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;*/ }