CSS完成照片等占比变小不会改变形的案例编码

日期:2020-12-12 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

下面1段编码给大伙儿详细介绍CSS完成照片等占比变小不会改变形 ,实际编码以下所示:
 

 <img src="../images/bg1.jpg" alt="" />
       img {
            /*等宽变小不会改变形*/
            /*width: 100%;*/
            /*2选1*/
            /*等高变小不会改变形*/
            height: 100%;
        }   

填补:CSS操纵照片尺寸不会改变形

1.(非常好,我正在用)

img {max-width:630px;myimg:expression_r(onload=function(){this.style.width=(this.offsetWidth > 630)?"630px":"auto"});}

设定最大宽度是630px 假如超过630就把照片宽度设定为630 高宽比就会伴随着占比也会变小 不容易导致照片形变

2.

img,a img{
border:0;
margin:0;
padding:0;
max-width:590px;
width:e­xpression(this.width>590?"590px":this.width);
max-height:590px;
height:e­xpression(this.height>590?"590px":this.height);
}

3.

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; 超过的一部分掩藏,防止操纵照片尺寸不成功而引发的撑开形变。

4.

假如想设置照片的高宽比和宽度都不超出某1个固定不动值,就必须在照片高宽比或宽度超出这个值的情况下,让照片按占比变小到这个规格。

1,针对当代访问器,例如Firefox或是IE7及以上,立即应用max-width和max-height两条CSS特性便可。

2,针对IE 6.0及下列版本号,以上两条CSS特性均不容易被理睬。以前解决这类事儿,大家常常会依靠Javascript,随后为照片再加onload恶性事件。比如:

<imgsrc="..."alt="..."onload="resizeImage(this)"/>
<script type="text/javascript">
  functionresizeImage(obj){
  obj.width=obj.width>50&&obj.width>obj.height?50:auto;
  obj.height=obj.height>50?50:auto;
  }
</script>

总结

以上所述是网编给大伙儿详细介绍的CSS完成照片等占比变小不会改变形的案例编码,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!