Question

＆＃13;

    .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)
    }

＆＃13;

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

＆＃13;

我试图在电视上播放屏幕，但随着分辨率的变化它不会停留当我们放大缩小时，两个div都会翻译

Answer 1

您的问题确实会受益于jsfiddle链接，因为您发布的内容并不详细，无法创建可重现的示例，但我认为我理解这一核心问题。您希望.screen div看起来始终位于.tv元素内，对吗？我认为你可能从错误的角度来解决这个问题。

您可能希望为两者创建容器元素，而不是生成.tv和.screen兄弟。然后，你可以绝对定位屏幕相对于电视的％尺寸。

请参阅此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应该为您提供更好的水平/垂直居中方式。

html页面上的元素改变分辨率变化的位置

1 个答案: