`
chenlb
  • 浏览: 689304 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

页面内图像比例自适应

    博客分类:
  • HTML
阅读更多
     收集于网络,自已小改动下。
有DrawImage(ImgD, width, height) 调整图像比例的javascript函数。

<script language="javascript">
<!--

var flag=false;
function DrawImage(ImgD, width, height){
var image=new Image();
var iwidth = width;
var iheight = height;
image.src
=ImgD.src;
if(image.width>0 && image.height>0){
flag
=true;
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){
ImgD.width
=iwidth;
ImgD.height
=(image.height*iwidth)/image.width;
}
else{
ImgD.width
=image.width;
ImgD.height
=image.height;
}
ImgD.alt
=image.width+""+image.height;
}
else{
if(image.height>iheight){
ImgD.height
=iheight;
ImgD.width
=(image.width*iheight)/image.height;
}
else{
ImgD.width
=image.width;
ImgD.height
=image.height;
}
ImgD.alt
=image.width+""+image.height;
}
}
}
//-->
</script>
<style type="text/css">
.pic_size 
{border:1px solid #CCCCCC;width:240px;height:200px;margin-top:5px;background:#FFF;}
</style>
<div class="pic_size"><table width="100%" height="100%"><tr><td style="text-align: center;vertical-align: middle;"><img src="my.jpg" onload = "DrawImage(this,240,200)"></td></tr></table></div>
分享到:
评论

相关推荐

    gu000047.github.io:我的github页面网站

    该过程中使用最多的元素是bootstrap#container#,它可以实现网页模块的布局比例并自行调整比例。 容器结构完成后。 根据网页的设计要求,在页面顶部,我使用了引导工具中的navbar来完成第一步。 我只需要修改标题...

    AdaptiveImages:以预定义的大小或移动设备调整现有HTML图像

    自适应图像 它基于并受其启发。 自动创建所需大小或更适合设备客户端的适配图片的解决方案。 语境 将较小的重量图片和宽度的最佳比例发送到浏览器。 在网站的各个页面上以不同的大小使用同一张图片。 它是如何工作...

    超实用的jQuery代码段

    2.25 禁止页面内全部超链接 2.26 实现动态组合列表框 2.27 如何使用属性过滤器 2.28 如何测试某个元素是否可见 第3章 jQuery操作HTML事件 3.1 禁止或启用输入框 3.2 实时监听输入框字符的变化 3.3 实时监听输入框值...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part1

    实例198 页面布局(3列左右侧固定中间自适应居中) 244 实例199 页面布局(2列右侧固定左侧自适应宽度) 247 实例200 页面布局(2列左固定右自适宽度+底平齐) 249 实例201 页面布局(2列右固定左自适宽度+底平齐) 252 3.6 ...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2

    实例198 页面布局(3列左右侧固定中间自适应居中) 244 实例199 页面布局(2列右侧固定左侧自适应宽度) 247 实例200 页面布局(2列左固定右自适宽度+底平齐) 249 实例201 页面布局(2列右固定左自适宽度+底平齐) 252 3.6 ...

    《程序天下:JavaScript实例自学手册》光盘源码

    15.28 等比例缩略图 15.29 用JavaScript导出图像到Excel 15.30 使用VML打造可改变大小的圆框 15.31 JavaScript实现文档结构图 15.32 判断一副图片是否加载完毕 第16章 页面数据的验证 16.1 验证字符串是否全由数字...

    程序天下:JavaScript实例自学手册

    15.28 等比例缩略图 15.29 用JavaScript导出图像到Excel 15.30 使用VML打造可改变大小的圆框 15.31 JavaScript实现文档结构图 15.32 判断一副图片是否加载完毕 第16章 页面数据的验证 16.1 验证字符串是否全由数字...

    微软UWP开发教程_2263页.pdf

    磁贴和 Toast 通知的语言、比例和高对比度支持 杂项 通知可视化工具 通知传递方法 通知通道类型 使用 Webpush 和 VAPID 的备用通道 定期通知 输入和交互 概述 输入基础版 指针输入 凝视 笔和 Windows Ink 教程:向...

    商用版本文本编辑器DotNetTextBoxV6.0.8Source 源码

    2)优化了图片水印功能,图片水印可以4:1为比例自适应图片。 3)增加水印调整功能的左上,左下,右上,右下角的位置(默认右下)。 4)增加图片水印是否半透明的选项。 2009/11/25 Version 6.1.2 For VS2005/2008 ...

    DotNetTextBox V6.0.10 商业版 下载 (已知最新)

    4)修正控件自带的FLV播放器播放某些视频时画面尺寸不按比例的BUG! 5)修正上传媒体文件功能中FLV不能正确显示文件图标的BUG! 6)增加AjaxSupport目录,使用此目录的文件覆盖原版同名文件后重新编译即可解决在Asp.Net ...

Global site tag (gtag.js) - Google Analytics