微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

兼容ie、firefox的图片自动缩放的css跟js代码分享_javascript技巧

php中文网
发布： 2016-05-16 17:26:01
原创
1307人浏览过

这个功能主要是解决内容页中的图片过大撑出，导致页面比较难看，就需要这样的代码，需要的朋友可以参考下

需求：图片width
1、利用max-width,max-height使图片等比例自动缩放

代码：

Fliki
Fliki

高效帮用户创建视频，具有文本转语音功能

Fliki 151
查看详情 Fliki
复制代码 代码如下:

img{max-width: 600px;max-height: 800px;}


由于ie6不支持css max-width,max-height,所以在ie6中需要利用javascript脚本来控制大小。

2、用javascript脚本来兼容ie6，代码如：

复制代码 代码如下:

var img_width = img.OffsetWidth;
var img_height = OffsetHeight;
var current_w = (150*img_width)/img_height;
var current_h = (330*img_height)/img_width;
if(img_height>150){
if(img_width>330){
D.css(img,{
width:330 + "px",
height:current_h + "px"
})
}else{
D.css(img,{
width:current_w + "px",
height:150 + "px"
})
}
}else{
if(img_width>330){
D.css(img,{
width:330 + "px",
height:current_h + "px"
})
}else{
D.css(img,{
width:img_width + "px",
height:img_height + "px"
})
}
}


【注1：D.css为KISSY.DOM.css，引用的是kissy类库中的DOM方法】

【注2：用javascript来控制图片的尺寸页面必须要等图片完全加载出来，所以代码要包含在window.onload事件中，如果图片加载速度很慢的话，可能会有一个小缺陷】

所有我们可以结合这两个一起使用。先用css然后后面再加上js。

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：jQuery :first选择器使用介绍_jquery 下一篇：Js点击弹出下拉菜单效果实例_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
JavaScript响应式编程_Observable与操作符设计 响应式编程通过Observable处理异步数据流，结合操作符实现声明式、可维护的复杂逻辑。
2025-11-22 18:34:42
447
JavaScript存储方案_IndexedDB事务操作 IndexedDB通过事务保证数据一致性，所有读写操作必须在事务中进行。事务需指定对象仓库和模式（readonly或readwrite），自动提交或因错误中止。示例：consttransaction=db.transaction([‘users’],‘readwrite’);constobjectStore=transaction.objectStore(‘users’);事务生命周期由请求完成情况决定，监听oncomplete、onerror、onabort事件可掌握结果。常用操作包括add(
2025-11-22 18:32:02
135
JavaScript逃逸分析_堆栈分配策略 逃逸分析是JavaScript引擎优化技术，用于判断对象是否仅在函数内使用，若未逃逸可栈分配或标量替换以减少GC；如obj被闭包引用则需堆分配，编写作用域小、少闭包的代码利于优化。
2025-11-22 18:31:02
707
编程语言中数组元素的规范称谓与变量概念解析 本文旨在澄清编程语言中数组内部存储项的规范称谓，重点区分“元素”与“变量”这两个概念。我们将依据C#语言规范，阐明数组项被称为“元素”，并指出“数组元素”是“变量”的一种特定类型，从而帮助开发者更准确地理解和使用相关术语，避免在编程交流中产生混淆。
2025-11-22 18:29:02
607
数组中单个项的正确术语辨析 本文旨在澄清编程中关于数组内部单个项的正确术语。通过引用权威语言规范，我们明确指出“数组元素”是描述数组中单个项最准确和专业的用语。文章将深入探讨“元素”与“变量”之间的层级关系，并强调在技术交流中采用精确术语的重要性，以避免混淆。
2025-11-22 18:28:34
853
数组中数据项的规范术语：‘元素’与‘变量’的辨析 本文旨在澄清编程中数组内部数据项的规范术语。尽管数组元素在广义上可被视为变量的一种，但其最准确、最专业的称谓是“元素”或“项”。文章将通过引用语言规范，详细解释“元素”与“变量”之间的关系，并强调在编程语境下使用特定术语的重要性，以避免混淆并提升代码可读性。
2025-11-22 18:28:20
990
数组中的项：深入理解“数组元素”与“变量”的精确概念 本文旨在澄清编程中关于数组内部项的正确术语。核心观点是，“数组元素”（ArrayElement）是描述数组中单个项最准确和专业的用语，尽管从广义上讲，每个数组元素都可被视为一种特定类型的“变量”。文章将探讨这两种术语的层级关系及其在编程语境中的精确应用。
2025-11-22 18:28:01
749
JavaScript对象操作_深拷贝与不可变数据结构 深拷贝确保对象完全独立，避免数据被意外修改。常用方法有JSON.parse(JSON.stringify())（仅适用于纯数据）、递归实现和Lodash的_.cloneDeep()。不可变数据通过创建新对象防止副作用，提升可预测性与调试效率，适合React/Redux场景。Immer库简化了不可变操作，允许“可变”语法生成新状态，内部采用Proxy和结构共享，性能优异。项目中应根据复杂度选择方案：简单场景用展开运算符，大型应用推荐Immer或成熟工具库。
2025-11-22 18:25:36
178
解决Pywebview中Paper.js画布渲染失败问题：CDN加载策略与实践 本文详细探讨了在pywebview环境中，Paper.js路径无法正确渲染到画布上的常见问题及其解决方案。核心问题在于Paper.js库的加载方式。通过将本地脚本引用替换为CDN链接，可以确保Paper.js库被正确加载和初始化，从而使绘图功能正常运作。教程将提供详细的代码示例和步骤，帮助开发者在pywebview应用中成功集成并使用Paper.js进行图形绘制，确保图形内容能被正确渲染并导出。
2025-11-22 18:14:02
973
JavaScript安全实践_常见漏洞与防护方案 答案：JavaScript安全需防范XSS、CSRF、数据反序列化漏洞和敏感信息泄露。应转义用户输入、使用CSP、Anti-CSRFToken、禁用eval、避免前端硬编码密钥，并遵循最小权限原则。
2025-11-22 18:13:02
470
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部