JS+css 图片自动缩放自适应大小
更新时间：2013年08月08日 11:11:53 作者：
编辑器上传的图片太大了，把FF和IE撑的走形，所以希望图片在某些页面里要有固定大小，如果需要某个范围，用getElementByname来设定，也是一个道理：
我加了css的限制：
div img {}{
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}
◎ max-width:600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。
◎ width:600px; 在所有浏览器中图片的大小为600px;
◎ 当图片大小大于600px，自动缩小为600px。在IE6中有效。
◎ overflow:hidden; 超出的部分隐藏，避免控制图片大小失败而引起的撑开变形。
在放图片的页面里加了
<script language="JavaScript">
var imgObj;
for( i = 0; i < document . getElementsByTagName("img") . length; i++ )
{
imgObj = document . getElementsByTagName("img")[i];
//建议只判断高度或者宽度其中一个，那样可以自动按比例缩放
if ( imgObj . width > 500 ) //判断图片的宽度，如果大于700，则设置为700，值可以自己修改
{
imgObj . width = 500
}
if ( imgObj . height > 700 ) //判断图片的高度，如果大于700，则设置为700，值可以自己修改
{
imgObj . height = 700
}
}
</script>
单独的图片控制，用这个：
<script>
var abc=document.getElementById("abc");
var imgs=abc.getElementsByTagName("img");
for (var i=0,g;g=imgs[i];i++)
g.onload=function(){if (this.width>300){this.width=300}else{if (this.height>300)this.height=300}}
</script>
测试在IE和FF下通过。
复制代码 代码如下:
div img {}{
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}
◎ max-width:600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。
◎ width:600px; 在所有浏览器中图片的大小为600px;
◎ 当图片大小大于600px，自动缩小为600px。在IE6中有效。
◎ overflow:hidden; 超出的部分隐藏，避免控制图片大小失败而引起的撑开变形。
在放图片的页面里加了
复制代码 代码如下:
<script language="JavaScript">
var imgObj;
for( i = 0; i < document . getElementsByTagName("img") . length; i++ )
{
imgObj = document . getElementsByTagName("img")[i];
//建议只判断高度或者宽度其中一个，那样可以自动按比例缩放
if ( imgObj . width > 500 ) //判断图片的宽度，如果大于700，则设置为700，值可以自己修改
{
imgObj . width = 500
}
if ( imgObj . height > 700 ) //判断图片的高度，如果大于700，则设置为700，值可以自己修改
{
imgObj . height = 700
}
}
</script>
单独的图片控制，用这个：
复制代码 代码如下:
<script>
var abc=document.getElementById("abc");
var imgs=abc.getElementsByTagName("img");
for (var i=0,g;g=imgs[i];i++)
g.onload=function(){if (this.width>300){this.width=300}else{if (this.height>300)this.height=300}}
</script>
测试在IE和FF下通过。
相关文章
移动设备分辨率五花八门虽然我们可以通过CSS3的media query来实现适配，但是这种做法并不能适配所有设备，这篇文章主要介绍了js动态计算移动端rem的解决方案，非常不错，感兴趣的朋友一起看看吧2016-10-10
这篇文章主要给大家介绍了webpack学习教程之publicPath路径问题的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-06-06
看看执行后有什么效果,无论textbox1.text是什么值,都会时放条件判断.为什么呢2009-06-06
这篇文章主要为大家详细介绍了JavaScript编写开发动态时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
本文主要介绍了layer弹出层框架alert与msg的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了微信小程序文章列表功能,结合完整实例形式详细分析了微信小程序文章列表功能具体布局、样式、功能相关实现技巧,需要的朋友可以参考下2020-06-06
这篇文章我们给大家总结了关于js中Array的方法及技巧，有需要的朋友们可以学习参考下。2018-09-09
这篇文章主要给大家介绍了利用纯JS实现像素逐渐显示的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。2017-08-08
这篇文章主要介绍了微信小程序 弹窗自定义实例代码的相关资料,有时候做开发项目的时候需要根据客户需求更改原系统的组件，这里就对小程序中弹窗进行更改，需要的朋友可以参考下2017-03-03
这篇文章主要介绍了单行 JS 实现移动端金钱格式的输入规则,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-05-05
最新评论