Question

我想在我的应用程序页面的特定区域（div）上构建缩放功能。我在下拉列表中有％值（200,100,50）的列表，我使用下面的代码部分实现了它。

Javascript功能：

   function ChangeZoom(zoom) {

            var Page = document.getElementById('divGrid');
            Page.style.zoom = zoom;
        }

ASPX页面

<select name="" id="ddzoom" onchange="ChangeZoom(this.options[this.selectedIndex].value);">
                                            <option value="400%">400%</option>
                                            <option value="200%">200%</option>
                                            <option value="100%" selected="selected">100%</option>
                                            <option value="50%">50%</option>
                                        </select>

上面的代码效果很好，它会改变所有元素的缩放级别。现在在我的情况下这个div我有多个图像控件，我不想扩展，因为我要求它改变它 src 仅用于优化页面的路径

即。在100％

<img id="MainContent_grid_Image1_0" class="device" src="../../Images/Device/100/5.JPG" ">

200％我会将其更改为 src =“../../ Images / Device / 200 / 5.JPG

但是发生了什么事也会扩大图像尺度！在这种情况下，我需要使用 style =“zoom：50％”来缩小比例，如下所示。

<img id="MainContent_grid_Image1_0" class="device" src="../../Images/Device/200/5.JPG" style="
    zoom: 50%;
">

如何在div缩放级别中忽略该元素，或者如何以另一种简单的方式实现它呢？

此外，缩放css属性仅适用于chrome。我需要在IE和IE中运行它FF？

提前致谢！

Answer 1

我已经解决了上述问题，如下所示

我已经根据100％缩放级别修复了高宽度，因此图像上没有额外的缩放

<img id="MainContent_grid_Image1_0" class="device" src="../../Images/Device/100/5.JPG" height="60" width ="35">.

在Chrome中效果很好。

如何使用Javascript忽略Zoom中的特定元素

1 个答案: