[英]I want to zoom image but inside the div
I want to zoom the image inside the div but when I am trying to zoom the image the size of the div is also increasing.我想缩放 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";
}
Instead of using the width/height, you can use the transform
property to scale
the image.您可以使用
transform
属性来scale
图像,而不是使用宽度/高度。 If you place that image inside a container with overflow:hidden
, you can resize the image to any size you like without it overflowing the container and the image will retain its original size for layout purposes.如果您将该图像放置在具有
overflow:hidden
的容器中,则可以将图像调整为您喜欢的任何大小而不会溢出容器,并且图像将保留其原始大小以用于布局目的。
With that said, you don't need a container with overflow hidden, but without one, the image will visually grow to whatever size you specify, though it will still maintain the intrinsic layout size.话虽如此,您不需要一个隐藏溢出的容器,但没有一个,图像将在视觉上增长到您指定的任何大小,尽管它仍将保持固有布局大小。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.