Div 외부의 이미지 이동
P粉004287665
P粉004287665 2023-08-13 15:21:15
0
1
424
<p>페이지 중앙에 검은색 div가 있는 웹사이트를 만들고 있는데, 그 위로 마우스를 가져가면 중앙의 이미지가 회전합니다. 문제는 이미지를 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("rotate-negative"); clone.classList.add("상위 이미지"); clone.classList.add("shadow-lg"); document.getElementById("container").appendChild(clone);</pre> <pre class="brush:css;toolbar:false;">img { 전환: 0.5초; 최대 높이: 600px; } .회전{ 변환: 회전(15deg); 위치: 절대; 상단: 0; 왼쪽: 0; } .회전-음수{ 변환: 회전(-5deg); 위치: 절대; 상단: 0; 왼쪽: 0; } .top-image:hover{ 변환: 회전(0deg); 전환: 0.5초; 최대 높이: 620px; } #컨테이너{ 여백 왼쪽: 자동; 여백 오른쪽: 자동; 높이: 500px; 너비: 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" 무결성="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" 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에서 "위치" 속성을 제거하고 싶지 않습니다. 중앙에 있는 이미지의 디자인이 손상될 수 있기 때문입니다. "위치" 속성을 제거하지 않고 div 내부의 이미지를 유지하려면 어떻게 해야 합니까? </p> <p><em><strong>같은 문제가 있는 다른 질문도 봤지만 도움이 되지 않았습니다. </strong></em></p>
P粉004287665
P粉004287665

모든 응답(1)
P粉054616867

선택기에 position: relative添加到您的#container만 입력하세요. 그러면 이 요소를 기준으로 하위 요소가 배치됩니다.

필요한 경우 overflow:hidden를 추가하여 이 요소의 범위를 벗어나는 콘텐츠를 잘라낼 수도 있습니다. 단, 필요하지 않은 경우에는 삭제하세요.

으아아아 으아아아 으아아아
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿