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ズームレベルでその要素を無視するにはどうすればよいですか、または別の簡単な方法でそれを達成するにはどうすればよいですか？

また、zoomcssプロパティは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">.

それはクロムでうまく機能します。

于 2012-10-18T11:12:30.157 に答える