让图片自适应大小的方法

1. 用后台程序自动生成缩略图
2. 用css调用expression控制图片溢出后的大小；
（http://www.blog.edu.cn/user1/7987/archives/2006/1440861.shtml ）
3. 用js写函数控制图片溢出后的大小；

其中后两种都是javascript在起作用，但是工作原理不同，css中调用expression可以解决这个问题，但是解决得不好，因为如果页面中图片一多，expression中的语句会不断被调用，非常耗费客户端内存，容易导致浏览器假死；而直接用javascript，在页面onload的时候就可以轻松解决这个问题，而且只调用一次，比起expression真是好得太多，程序很简单，下面是个简单的例子，我假设这个页面图片宽度不能超过200px，而实际图片宽度是550px：

<body>
<img  id="achome" src="http://image2.sina.com.cn/ent/y/2006-10-09/U1819P28T3D1276435F326DT20061009152013.jpg" />
</body>

<script>
    var imageArr=document.getElementById(controlID);
    var imageRate = imageArr.offsetWidth / imageArr.offsetHeight;

    if(imageArr.offsetWidth > maxWidth)
    {
        imageArr.style.width=maxWidth + "px";
        imageArr.style.Height=maxWidth / imageRate + "px";
    }

    if(imageArr.offsetHeight > maxHeight)
    {
        imageArr.style.width = maxHeight * imageRate + "px";
        imageArr.style.Height = maxHeight + "px";
    }

</script>

下面是图片自适应的:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=gb2312"
/>
<title>css2.0 VS ie</title>
<style
type="text/css">

</style>
</head>
<body>
<div
id="pic">
<img src="/articleimg/2006/03/3297/koreaad_10020.jpg"
alt="感谢blueidea被我盗链图片！"/>
</div>
</body>
</html>

或者

<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=gb2312"
/>
<title>css2.0 VS ie</title>
<style
type="text/css">

</style>
</head>
<body>
<div
id="pic">
<img src="/articleimg/2006/03/3297/koreaad_10020.jpg"
alt="感谢blueidea被我盗链图片！"/>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/cxd4321/p/3284770.html

让图片自适应大小的方法相关推荐

css自适应图片样式,css怎么让图片自适应？css图片自适应大小的方法介绍
对于一个网页来说,有一张好看又清晰的背景图片是非常吸引人的,但是并不是每张图片都是有相同的大小,所以就需要晒西安图片的自适应,那么,css怎么让图片自适应呢?本篇文章将来介绍关于css图片自适应大小的 ...
背景图片自适应大小的方法
<!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...
python 修改图片尺寸_Python实现更改图片尺寸大小的方法(基于Pillow包)
本文实例讲述了Python实现更改图片尺寸大小的方法.分享给大家供大家参考,具体如下: 1.PIL包推荐Pillow. 2.源码: #encoding=utf-8 #author: walker #d ...
手机图片压缩大小的方法，用什么软件压缩
手机图片怎么压缩大小,现在很多的手机拍出来的图片文件都在几兆,这样的图片文件是不能够上传到一些网站中的,今天小编就为大家介绍一下手机图片压缩大小的方法以及压缩软件的使用方法. 使用软件:迅捷压缩软件 ...
html 中图片自适应大小设置
一.图片自适应大小图片设置固定大小(当然width和height至少大于200px的情况下)个人觉得就很影响响应式布局了,可能会使移动端局部发生错乱,所以图片在一个div中自适应大小,个人还是觉得挺 ...
css怎么设置背景图片自适应大小
在css中,可以利用"background-size"属性设置背景图片自适应大小,该属性用于设置背景图片的大小,只需要给背景图片元素添加"background-size: ...
ReactNative之Image组件自适应高度，图片自适应大小
因为在现在0.50包括之前的ReactNative版本,Image组件必须要设置宽高才能显示.所以在图片宽高不确定的情况下,如何来让图片自适应屏幕高度呢? 需求原因:因为做商城详情页面的图片长短不一 ...
图片太大上传不了怎么缩小？jpg图片压缩大小的方法
自媒体平台上传jpg图片通常都会有大小限制,为了可以正常使用,我们需要把过大的jpg格式图片压缩变小.想要实现压缩jpg图片的方法有很多,今天就介绍一种比较简单的,利用在线jpg压缩(在线jpg压缩免 ...
微信小程序富文本标签 rich-text 图片自适应大小问题
最近项目新加了一个需求,由于时间比较充足的原因.我完成的很出色,但是无奈测试最后不走寻常路.几句话的说明他加了好多文字还搞了图片,甚至还有了一句经典的名言如果没有 BUG 她就没有工作,叫人苦不堪言. ...

让图片自适应大小的方法

让图片自适应大小的方法相关推荐

最新文章

热门文章