Question

我想知道如何在iframe中缩放图片。

例如，我必须将图像视为50％变焦，75％变焦和100％变焦。

这可能吗？

提前致谢

Answer 1

有一个名为“zoom”的CSS 3属性可以放在大多数元素上：

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

在IE7及更早版本中，您需要使用“-ms-zoom”CSS扩展名：

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

只想添加另一张海报使用宽度/高度和％值的选择绝对是图像的首选。只有在需要包含多个要缩放/缩放的项目的布局时，缩放属性才真正有用。（例如，将缩放放在包含其他元素的div上等）。

Answer 2

下面的变量yd和ye是Dom和Event的YUI 2.8.1依赖文件，没有YUI你可以达到相同的效果。我点击时基本上只是在图像上设置zoom CSS级别（缩放值只是从我点击的链接的文本值中获得）。

<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>

可以在iframe中缩放图像

2 个答案: