요소

Question

.screen { 
 
     z-index: 100000; 
 
     overflow: hidden; 
 
     background: #333; 
 
     width: 1840px; 
 
     height: 1090px; 
 
     top: 400px; 
 
     left: 965px; 
 
     outline: 1px solid transparent; 
 
     -webkit-transform-origin: 0px 0px 0px; 
 
     transform-origin: 0px 0px 0px; 
 
     -webkit-transform: matrix3d(0.9828571428571429, 0, 0, -0.00003284072249589491, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) transform: matrix3d(0.9828571428571429, 0, 0, -0.00003284072249589491, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) 
 
    }

<div class="screen"> 
 
    <ul id="slideshow" class="slideshow"> 
 
    <li class="slideshow__item"> 
 
     <img src="img/large/2.png" /> 
 
    </li> 
 
    <li class="slideshow__item"> 
 
     <img src="img/large/3.png" /> 
 
    </li> 
 
    <li class="slideshow__item"> 
 
     <img src="img/large/4.png" /> 
 
    </li> 
 
    <li class="slideshow__item"> 
 
     <img src="img/large/1.png" /> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<center> 
 
    <img class="tv" src="360.png" style="position:fixed;left: 935px;top:0px; 
 
    z-index: -99;" width="50%" height="90%">

내가 TV의 화면을 얻으려고하지만 해상도가 모두 div의 변화로 늘 우리가 확대로 번역 유지 in zoom out

Answer 1

당신이 게시 한 것이 재현 가능한 예제를 만드는 데 필요한 자세한 정보가 아니기 때문에 jsfiddle 링크를 사용하면 실제로 도움이 될 것입니다. .screen div가 .tv 요소 내부에 일관되게 배치되도록 하시겠습니까? 나는 당신이 잘못된 각도에서이 문제에 접근하고 있다고 생각합니다.

.tv 및 .screen 형제를 만드는 대신 두 가지 모두에 대해 컨테이너 요소를 만들 수 있습니다. 그런 다음 TV에 상대적인 비율로 화면을 절대적으로 배치 할 수 있습니다.

jsfiddle으로 직접 확인하십시오.

HTML :

<div class="tv-container"> 
    <img class="tv" src="http://i.imgur.com/PB2GB1q.png"> 
    <div class="screen"> 
</div> 

CSS :

또한

.tv-container { 
    position: fixed; 
    width: 50%; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

.tv { 
    width: 100%; 
} 

.screen { 
    position: absolute; 
    left: 2.5%; 
    top: 3%; 
    width: 95%; 
    height: 70%; 
    background: green; 
} 

, <center>를 사용하지 마십시오. 똑같아. jsfiddle은 당신에게 수평/수직 센터링의 더 좋은 방법을 제공해야합니다.