logo标签列表

内容（图像）溢出父元素div

javascripthtmlcss
3
我尝试使用html、css和Javascript实现缩放效果，但是在缩放内容后，图像会超出父div。
点击放大按钮后，图像将超出div，第一张图像将从开头剪切。 

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%;
}
<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>

3个回答
5

由于默认情况下 transform-origin（transform(scale()) 变换的起点）设置在图像中心，因此它会超出包含它的 div。

如果将其设置为顶部中间，则图像将从上到下缩放：

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

0
    .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;
}
2
为什么应该这样做？一些解释将有助于提问者。 - joanolo
-2

你的 div 区域/容器应该有溢出隐藏，即：

.demoCss {
  overflow: hidden;
}

1
那又怎样？这只会移除滚动条，内容仍然会被裁剪，没有任何查看它的可能性。已经被踩了。 - Jeremy Thille
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接