css图片按比例自动缩放

关于图片自动缩放的问题，网上相关资料提供方案是在img标签的 onload 中通过js代码去实现。但是当页面中有10个图片要自动调整时，通过onload方式是不可行的。

.show-img{

    max-width:117px; //firefox

    max-height:90px;

    scale:expression((this.offsetWidth / this.offsetHeight > 117/90)?(this.style.width = this.offsetWidth >= 117 ? "117px" : "auto"):(this.style.height = this.offsetHeight >= 90 ? "90px" : "auto")); //ie

    display:inline !important;

}

 

<img class="show-img" src="../default.jpg"></img>

 

当我们只设置高度或者宽度时，默认在 ie 和 firefox 下会按照图片的比例显示。但是如我们设置高度，图片按比例计算宽度比较大时将横向伸展。所以我们必须同事设置最大高度和最大宽度。

 

img{

    border:1px solid #cacaca;

    padding:2px;

    max-width:600px;

    width:expression(this.offsetWidth > 600 ? "600px" : "auto");

    display:inline !important;

}

 

该样式图片宽度大于600px时，宽度显示600px且按比例缩放，高度自动调整。图片宽度小于600px时按其实际宽度和比例自动调整。