css 照片自融入宽度 CSS完成操纵照片自融入显示信

日期:2021-01-20 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

做网站的情况下常常遇到,新闻展现等,客户提交的照片太大了 自身又不去调处,致使展现的情况下照片太大撑开了,使网页页面显示信息的很难。这里运用CSS特性,使照片超出展现的宽度后,给照片设定显示信息最大的宽度。
倘若用width特性强行设置显示信息规格好像太不智能化。幸亏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:700px;
width:expression( 
   function(img){ 
    img.onload=function(){ 
     this.style.width=''; 
     this.style.width=(this.width>700)?"700px":this.width+"px" 
    }; 
    return '700px'
   }(this) 
  );
}

运用<img>的onload恶性事件使照片载入进行后测算其规格尺寸,倘若超出500像素就显示信息为500像素,不然显示信息其默认设置宽度。 
expression并不是合乎WEB规范的做法,不到万不可以不提议应用。可是不可以不认可IE的许多拓展是非常好的,IE不可该被忽视!
上一篇:翻转视差实际效果background 返回下一篇:没有了