如何利用JS或者CSS样式来自动调整图片大小

2024-12-04 06:04:22

推荐回答（3个）

回答1：

js版和css版自动按比例调整图片大小方法，分别如下：

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;
                  }
      }
}

纯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;}

回答2：

这个使用CSS可以控制，一般看你的图片是哪种比例的，如果不想图片变形的话，只设置宽或者高，如：
img{ width:50px;} 或者 img{height:50px;}
这样的结果是，图片本身的大小并没有改变，但这个img标签显示出来的图片是被压缩显示的。
利用JS来调整的原理是：获得图片的宽和高，然后去与父容器的宽高相比，取比例大的来父容器值对img进行样式设置，比如：图片宽/父容器宽 = 3，图片高/父容器高 = 2，那么取父容器的宽，把这个值通过JS设置给img标签。

回答3：

2楼的能够解决CSS控制图片尺寸的问题，但是还不够灵活，我在他的基础上补充一下，
可以这样，如果你的图片的最大宽度不能超过600

只要在CSS里面加句就可以

#content img{max-width:600px;}