Pergerakan imej di luar Div

Question

Saya sedang mencipta tapak web yang mempunyai div hitam di tengah halaman dan apabila saya menuding di atasnya, imej di tengah berputar. Masalahnya ialah walaupun saya meletakkan imej di dalam div, ia pergi di luar sempadan div. Bagaimana untuk menyelesaikan masalah ini? Ini ialah kod HTML saya:

const image = document.getElementById("pic");
image.classList.add("putar");
klon const = image.cloneNode(true);
clone.classList.add("putar-negatif");
clone.classList.add("imej atas");
clone.classList.add("shadow-lg");
document.getElementById("bekas").appendChild(klon);

img {
  peralihan: 0.5s;
  ketinggian maksimum: 600px;
}

.putar{
  mengubah: berputar (15deg);
  jawatan: mutlak;
  atas: 0;
  kiri: 0;
}

.putar-negatif{
  mengubah: berputar (-5deg);
  jawatan: mutlak;
  atas: 0;
  kiri: 0;
}

.top-image:hover{
    transform: rotate(0deg);
    peralihan: 0.5s;
    ketinggian maksimum: 620px;
}
#bekas{
    jidar-kiri: auto;
    margin-kanan: auto;
    ketinggian: 500px;
    lebar: 30%;
    warna latar belakang: hitam;
}

<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="bekas">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcToJI-yx2dCcsVf3fYDDRF908iRO_dlTsL9H32iWWIkT_1dYuimsdBUZKTIZgYC61z6p;CcsVf3fYDDRF908iRO_dlTsL9H32iWWIkT_1dYuimsdBUZKTIZgYC61z6p;pic&usg;
</div>

Saya mahu imej diletakkan di dalam div. Walau bagaimanapun, saya tidak mahu mengalih keluar sifat "kedudukan" daripada CSS kerana ini akan memecahkan reka bentuk imej yang berada di tengah. Apakah yang boleh saya lakukan untuk mengekalkan imej di dalam div tanpa mengalih keluar atribut "kedudukan"?

Saya melihat soalan lain dengan masalah yang sama, tetapi ia tidak membantu saya.

Answer 1

Letak sahaja position: relative添加到您的#container dalam pemilih. Ini akan meletakkan elemen kanak-kanak berbanding dengan elemen ini.

Jika perlu, anda juga boleh menambah overflow:hidden untuk memotong kandungan di luar skop elemen ini. Walau bagaimanapun, jika anda tidak memerlukannya, padamkannya.

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;*/
}

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