防止html静态页面内容中的图片撑破表格的终极方法

防止html静态页面内容中的图片撑破表格的终极方法

作者：网上收集点击：读取中... 次

方法一：用css命令控制

以下是css：

引用代码：
<style type="text/css">
img { max-width:760px;
width:expression(this.width > 760 ? "700px" : this.width) }
</style>

max-width是最大宽度，您可以自己设置。后面expression是表达式，意思是问你当前图片的宽度是否大于760，如果是那么当前图片的宽度为700.

方法二：该方法的缺点就是不能全部显示图片

以下是css：

引用代码：<style type="text/css">
table {
table-layout: fixed;
word-wrap:break-word;
}
div {
word-wrap:break-word;
}
</style>

方法三：用javascript控制

以下是代码：

引用代码：<script language="javascript" type="text/javascript">
function DrawImage(ImgD,iwidth)
{
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0)
{
  if(image.width>iwidth)
  {
  ImgD.width=iwidth;
  ImgD.height=(image.height*iwidth)/image.width;
  }
}
ImgD.style.display = "block";
}
</script>
<img src="sample.jpg" border="0" style="display:none">

相关解释：
1.实例化一个新的图片对象，并把传递过去的图片src赋给新实例化的图片，防止图片在未指定宽度时取不到图片宽度的值；
2.图片设定style="display:none"，并在执行DrawImage函数结束时调用ImgD.style.display = "block"，防止图片缩放前将表格撑大;
3.如果图片的宽度超过指定的宽度，则按比例缩放，ImgD.height=(image.height*iwidth)/image.width，改成这样更容易看出来高度是如何计算出来的：ImgD.height=image.height*(iwidth/image.width)

收藏此文章　　　　　打印更新　　　　　编辑此文章　　　　『关闭窗口』


	家园个人文集		http://www.5x54.com