javascript - 针对第三方提供的图片更改样式后的拉伸问题

Question

项目中的图片多来自第三方，具体的尺寸无法确定，如果直接在样式中写死图片的尺寸大小就会出现图片拉伸的现象，十分影响页面效果的美观性，因此希望可以找到一个比较好的解决方案。
在加载图片资源后获取真实尺寸和图片容器的大小，如何利用JavaScript动态地设置图片的长度和宽度以保证图片拉伸效果不影响美观。

<style>
    .img1{width:200px;height:200px;border: 1px solid #000;overflow: hidden;margin: 10px;}
    .img2{width:200px;height:90px;border: 1px solid #000;overflow: hidden;margin: 10px;}    
</style>

Answer 1

可以直接用js来处理，假设你外面的边框为100px*100px,希望图片放进去后 等比例缩放居中，新的宽度为80

window.onload = function() {

    //获取图片
    var imgObj = document.getElementsByTagName('img');
    var n;
    for (n = 0; n < imgObj.length; n++) {

        // 获取图片的原始高度和宽度
        var oldWid = imgObj[n].offsetWidth;
        var oldHei = imgObj[n].offsetHeight;

        //设定新的宽度为80
        imgObj[n].style.width = 80 + 'px';

        //等比例缩放高度
        imgObj[n].style.height = oldHei * (80 / oldWid) + 'px';
        imgObj[n].style.marginLeft = 10 + 'px';
        imgObj[n].style.marginRight = 10 + 'px';
        imgObj[n].style.marginTop = (100 - oldHei * (80 / oldWid)) / 2 + 'px';
        imgObj[n].style.marginBottom = (100 - oldHei * (80 / oldWid)) / 2 + 'px';
    }
}

希望能看懂，哪里不懂问~