Question

我尝试使用html，css和Javascript进行缩放效果，但在缩放内容后图像会脱离父div。

单击zoomin按钮后，图像将离开div，第一张图像将从头开始剪切。

＆＃13;

var factor = 1;

function funZoomOut() {
  if (factor > 0.5) {
      factor = factor - 0.1;
      var p = document.getElementById("divArea");
      p.setAttribute("style", "transform: scale(" + factor + ");");
  }
}
function funZoomIn() {
  if (factor < 1.3) {
      factor = factor + 0.1;
      var p = document.getElementById("divArea");
      p.setAttribute("style", "transform: scale(" + factor + ");");
  }
}

＆＃13;

.demoCss {
  overflow: auto;
  height: 470px;
  text-align: center;
  border: 5px solid red;
  padding-top: 10px;
  position: relative;
}

.test {
  height: 100%;
}

＆＃13;

<body>
<div>
  <div>
    <button id="btn1" value="submit" onclick="funZoomOut();" style="position:relative; z-index:1;">ZoomOut</button>
    <button id="btn1" value="submit" onclick="funZoomIn();" style="position:relative;z-index:1;">ZoomIn</button>
  </div>
  <div class="demoCss">
    <div id="divArea" class="test">
      <div>
          <img src="Images/2.jpg" alt="image" height="150px" width="150px" id="img1" />
      </div>
      <div>
          <img src="Images/article-1.jpg" alt="image" height="150px" width="150px" />
      </div>
      <div>
          <img src="Images/article-1.jpg" alt="image" height="150px" width="150px" />
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

它超出了包含div，因为transform-origin（transform(scale())作为转换的起点）默认设置在图像的中心。

如果您将其更改为位于中上方，则图片将从上到下进行缩放：

.test {
  transform-origin: 50% 0%;
}

var factor = 1;

function funZoomOut() {
  if (factor > 0.5) {
    factor = factor - 0.1;
    var p = document.getElementById("divArea");
    p.setAttribute("style", "transform: scale(" + factor + ");");
  }
}

function funZoomIn() {
  if (factor < 1.3) {
    factor = factor + 0.1;
    var p = document.getElementById("divArea");
    p.setAttribute("style", "transform: scale(" + factor + ");");
  }
}

.demoCss {
  overflow: auto;
  height: 470px;
  text-align: center;
  border: 5px solid red;
  padding-top: 10px;
  position: relative;
}

.test {
  height: 100%;
  transform-origin: 50% 0%;
}

<div>
  <div>
    <button id="btn1" value="submit" onclick="funZoomOut();" style="position:relative; z-index:1;">ZoomOut</button>
    <button id="btn1" value="submit" onclick="funZoomIn();" style="position:relative;z-index:1;">ZoomIn</button>
  </div>
  <div class="demoCss">
    <div id="divArea" class="test">
      <div>
        <img src="https://lorempixel.com/300/300/?1" alt="image" height="150px" width="150px" id="img1" />
      </div>

      <div>
        <img src="https://lorempixel.com/300/300/?2" alt="image" height="150px" width="150px" />
      </div>
      <div>
        <img src="https://lorempixel.com/300/300/?3" alt="image" height="150px" width="150px" />
      </div>
    </div>
  </div>

Answer 2

    .demoCss {
  overflow: auto;
  height: 470px;
  text-align: center;
  border: 5px solid red;
  padding-top: 10px;
  position: relative;
}

.test {
  height: 100%;
  transform-origin: 50% 0%;
  transitions: all 0.5s ease 0s;
}

Answer 3

您的div区/容器应隐藏溢出，即

＆＃13;

.demoCss {
  overflow: hidden;
}

＆＃13;

内容（图片）超出了父级

3 个答案: