0
点赞
收藏
分享

微信扫一扫

图片会自动按比例缩小(js版和css版)


<title>javascript图片大小处理函数</title>

<script language=Javascript>

var proMaxHeight = 150;

var proMaxWidth = 110;


function proDownImage(ImgD){

      var image=new Image();

      image.src=ImgD.src;

      if(image.width>0 && image.height>0){

      var rate = (proMaxWidth/image.width < proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;

    if(rate <= 1){   

     ImgD.width = image.width*rate;

     ImgD.height =image.height*rate;

    }

    else {

                          ImgD.width = image.width;

                          ImgD.height =image.height;

                  }

      }

}

</script>


</head>


<body>


<img src="999.jpg" border=0 width="150" height="110"  onload=proDownImage(this);   />

<img src="room.jpg" border=0 width="150" height="110" onload=proDownImage(this);   />

</body>






纯css的防止图片撑破页面的代码,图片会自动按比例缩小


<style type="text/css">

.content-width {MARGIN: auto;WIDTH: 600px;}

.content-width img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 600 ? "600px" : this.width)!important;}

</style>



<div class="content-width">

  <p><img src="/down/js/images/12567247980.jpg"/></p>

  <p><img src="/down/js/images/12567247981.jpg"/></p>

</div>


举报

相关推荐

0 条评论