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

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 和 FF 中运行它？

提前致谢!

Answer 1

我自己解决了上面的问题如下

只是我已经根据 100% 缩放级别采取固定高宽度，因此不会对图像进行额外缩放

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

它在 chrome 中运行良好。