首页 > 编程 > JS > 正文

如何让图片自动适应网页的大小

2023-04-13 12:30:09
字体:
来源:转载
供稿:网友

我们在做网页时往往要用图片来说明一些问题,但是有些图片尺寸过大,把用来布局的表格给撑大了,如果每个图片都修改其尺寸,又显得非常麻烦,下面给出利用Javascript结合CSS属性来控制图片大小的方法。

在IE5.5以上版本中,用JS判断图像的尺寸,如果图像的尺寸大于一个定值时,用ZOOM进行缩放:

首先,建立一个名为zoom.htc 的behavior文件,并写入如下代码:

<public:attach event="oncontentready"" onevent="zoom()" />
<script language="javascript">
function zoom(){
     if(this.width>700)   this.style.zoom = 1/(width/700);    //ZOOM= 1 除以(宽除以规定宽度)
}
</script>

其次,在网页中加入如下代码:

<style>
          .hyperlook img { behavior:url('zoom.htc')} //注意ZOOM.htc的路径
        </style>

最后,在需要控制的地方的前后加入:<div class="hyperlook"> </div>

怎么样,测试一下效果如何吧,但是以上解决方案只在ie5.5以上有效。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表