can i zoom the image in iframe

i want to know how to zoom the image in iframe.

for example i have to view the image as 50% zoom,75% zoom and 100% zoom.

is t开发者_如何学JAVAhis possible?

thanks in advance

---

There is a CSS 3 property called "zoom" that you can put on most elements:

http://www.css3.com/css-zoom/

in IE7 and earlier you need to use the "-ms-zoom" CSS extension:

http://msdn.microsoft.com/en-us/library/ms531189(VS.85).aspx

Just want to add that the other poster's choice of using width/height with % value is definitely preferred for images. The zoom property is only really useful if you need a laytout that contains multiple items to scale/zoom together. (e.g. putting the zoom on a div that contains other elements, etc).

---

The vars yd and ye below are YUI 2.8.1 dependency files for Dom and Event, you could achieve the same effect without YUI. I'm basically just setting the zoom CSS level on the image when I click (the zoom value is obtained simply from the text value of the link I click).

<a href="javascript:;" class="zoom">25</a>
<a href="javascript:;" class="zoom">50</a>
<a href="javascript:;" class="zoom">100</a>

<img src="content/img/1000-1-people.png" width="350" height="290" alt="" id="myImage" />

<script type="text/javascript">
ye.on( yd.getElementsByClassName('zoom', null, document), 'click', function(e){
    yd.setStyle(yd.get('myImage'), 'zoom', this.innerHTML+'%');
});
</script>