我想缩放图像但在 div 内

Question

我想缩放 div 内的图像，但是当我尝试缩放图像时，div 的大小也在增加。

<img src="" alt="Image Preview" id="zoom" class="image-preview__image">

   <div class="btn-group mt-2" role="group" aria-label="">
            <button ng-click="Size=100" class="btn btn-sm btn-group btn-outline-info" onclick="zoomout()" >100%</button>
            <button ng-click="Size=200"  class="btn btn-sm btn-group btn-outline-info"  onclick="zoomin()" >200%</button>
            <button ng-click="Size=300" class="btn btn-sm btn-group btn-outline-info">300%</button>
            <button ng-click="Size=400" class="btn btn-sm btn-group btn-outline-info">400%</button>
            </div>

    <script type="text/javascript">

   function zoomin() {
        var GFG = document.getElementById("zoom");
        var currHeight = GFG.clientHeight;
            GFG.style.height = (currHeight + 40) + "px";
    }
    function zoomout() {
        var GFG = document.getElementById("zoom");
        var currHeight = GFG.clientHeight;
            GFG.style.height = (currHeight - 40) + "px";
    }

Answer 1

您可以使用transform 属性来scale 图像，而不是使用宽度/高度。如果您将该图像放在带有overflow:hidden 的容器中，您可以将图像调整为您喜欢的任何大小而不会溢出容器，并且图像将保留其原始大小以进行布局。

话虽如此，您不需要隐藏溢出的容器，但如果没有容器，图像会在视觉上增长到您指定的任何大小，但仍会保持固有布局大小。

document.querySelectorAll("button").forEach(e => {
  e.addEventListener("click", function(){
    let size = this.getAttribute("ng-click").split("=")[1];
    let image = document.getElementById("zoom");
    image.style.transform = `scale(${size}%)`;
  });
});

.image-container
{
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.image-container img
{
  transition-duration: 1s;
}

<div class="btn-group mt-2" role="group" aria-label="">
  <button ng-click="Size=100" class="btn btn-sm btn-group btn-outline-info">100%</button>
  <button ng-click="Size=200" class="btn btn-sm btn-group btn-outline-info">200%</button>
  <button ng-click="Size=300" class="btn btn-sm btn-group btn-outline-info">300%</button>
  <button ng-click="Size=400" class="btn btn-sm btn-group btn-outline-info">400%</button>
</div>

<div class="image-container">
  <img alt="Image Preview" id="zoom" class="image-preview__image" src="https://via.placeholder.com/200x200">
</div>