Question to say "I can!"

燕赵风采20选5今日开奖:CSS 图片自适应显示宽度

2013-05-05

这个使用尤其中手机屏幕上最有用。

有喜欢方法:

function ReImgSize(){
for (j=0;j<document.images.length;j++)
{
document.images[j].width=(document.images[j].width>420)?"420":document.images[j].width;
}
}

然后在body区域加上onload="ReImgSize()" 就可以了。经过测试,在Mozilla和IE上通过.。在这里补充一下关于图片的自适应,这点Mozilla做的比IE好,因为可以用CSS来控制图片的自适应。我们都知道Mozilla支持一个max-width 的CSS语法。于是我们这样这样定义图片的全局样式。

img{
max-width:100%;height:auto;
}

这样图片就回在div或table内自动适应其大小了.

 

Firefox/Opera/IE7都提供了max-width属性支持。

假定希望图片显示宽度不超过500像素,CSS可能如下:

以下为引用的内容:

fit-image{
border:0;
max-width:500px;
}

让我痛恨的IE6不支持max-width属性,但是利用IE独有的expression属性能够迂回的解决这个问题。

以下为引用的内容:

fit-image{
border  :0;
max-width:500px;
width:   expression(
function(img){
img.onload=function(){
this.style.width=’’;
this.style.width=(this.width>500)?"500px":this.width+"px"
};
return’120px’ //加载时显示宽度为120px
}(this)
);
}

利用<img>的onload事件使图片加载完成后计算其尺寸大小,假如超过500像素就显示为500像素,否则显示其默认宽度。

expression不是符合WEB标准的做法,不到万不得以不建议使用。

作者:admin | Categories:设计问题 | Tags: 、、、

6条评论

  1. 厦门快生活说道:

    不错,正用上了,哈哈?。?!

  2. 一起购物吧说道:

    像这样的代码background-image:url(//www.178by.com/images/1.jpg); 做背景如何适应,我看网上都是用DIV实现的

  3. 网站测速说道:

    博主介绍的这个方法很好用,我最近在做个移动版网页,可以用到这个方法。

  4. 有趣网说道:

    非常有用 帮到我了

  5. t说道:

    还是很有用的,www.verygood.link/wap.php用了楼主第一种方法不管用呢

  6. 说道:

    非常感谢,我做的微信页面刚好用上了

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

  • 方言报站也是一种有意义的尝试 2019-05-22
  • 财经随笔:年近半百,“金融科技”仍是少年 2019-05-20
  • 山西寿阳:竹马戏演员的台前幕后 2019-05-19
  • 主城赏荷地图出炉 快带上相机出发 2019-05-19
  • 男人不安全了?日本读心美女机器人,你咋想的它全知道! 2019-05-03
  • 重庆市永川区:“1+8+X”模式探索基层人民调解新路子 2019-05-03
  • 春节我在岗:爸妈,儿子在军营给您们拜年了 2019-04-22
  • 传统文化,在中国文化里,居住是衡量一个家庭生活的基本因素。 2019-04-15
  • 俄韩就铺设途经朝鲜的天然气管道恢复磋商 2019-04-15
  • 经营者要想“我心换你心”,就要未雨绸缪,让不诚信的诱惑少一点,如此才能在市场中生存下来。反过来说,承担不起亏损就关门歇业,是否也是一种不诚信呢? 2019-04-11
  • 江西省能源集团公司党委副书记胡运生等2人被调查 2019-04-11
  • 乌鲁木齐:这个端午,他们的假日叫“坚守” 2019-03-29
  • 中国电信安康分公司60家智慧家庭便民服务中心盛大开业中国电信安康-最新活动 2019-03-28
  • 中心城区核心片组完成签约清零任务 2019-03-28
  • (Dos sesiones) Legislativo nacional de China concluye sesión anual Spanish.xinhuanet.com 2019-03-28
  • 503| 758| 898| 18| 633| 740| 164| 821| 687| 26|