2

我想在我的应用程序页面的特定区域（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 中运行它吗？

提前致谢！

4

1 回答 1

0

我自己解决了上述问题，如下所示

只是我已经根据 100% 缩放级别修复了高宽度，所以图像上不会有额外的缩放

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

它在 chrome 中运行良好。

于 2012-10-18T11:12:30.157 回答