如何让不同尺寸的图片 优雅地插入固定的容器

在我们电子口岸UED第一版测试上线的时候（感谢开发一部同志们的全力配合），大家发布文章之后发现，有些页面的图片溢出了左侧原先设定好的容器。如图：

 

 

 

 

 

    图片中绿色的框框是之前定义的leftlayout块容器，仅仅用于显示页面左侧的文章内容，它的宽度是778px；而现在插入了一张宽度为946px的图片，撑破了容器，大家可以看到，图片已经撑到了容器的外部，覆盖了右侧内容，违背了页面正常表现。

 

 

    笔者当时脑海中冒出来的第一想法就是：可以让大家把图片都在本地编辑成宽度小于等于778px，然后再上传到文章里面，这样不就没问题了嘛！

    答：咋一看！这个方法从最底层解决了问题的来源，很棒。但是回过头来想想，每篇文章少则一张图，多则好几十张图，而且你在缩放的时候必须按比例缩放，这在批量处理软件里面很难实现，熟练使用美工软件的还好，万一有不熟悉美工软件，又着急发布文章的同学呢，而且即使熟练运用工具，处理尺寸也是一项枯燥乏味的过程，so世界上肯定有更好的办法！

 

 

    时间又过了一天（因为当时项目穿插，做其它去了。。），在网上看到一种用js去动态改变图片宽度的方法，但是当时找到的这个方法有个问题，它把所有的图像都变成容器宽度，尺寸小的也放大了，这并不是我们项目中希望的。不过这确是一个很好的启发，用javascript来改变img标签的样式！

 

 

    之后查阅了相关资料，发现只有img标签里面自己带有宽度属性，才能获取标签的宽度；

比如<img src=”” width=”300” id=”UED”>这种就能document.getElementById("UED").style.width;获取它的宽度了，因为我要判断这个width是大于778px还是小于778px，才能进行下一步操作；通过和开发一部的孙工程师沟通，在文章发布的时候添加这个width属性不方便，就是说用户传的只是原始图，不带有任何属性信息。

 

我还是坚信从前端可以解决这个问题，继续、继续！

 

    感谢w3school教程网，我看到了创建img标签的方法，可以创建一个新的虚拟img元素，然后跟当前img元素对比，把载入的img元素的style从虚拟的img元素对比得出，通过两次对比，可以分别得出高跟宽的px尺寸，判断载入图片的尺寸是否溢出容器，溢出则把图片的width设置成容器的宽，不溢出则显示它原先的尺寸。好了大功告成！

 

代码如下：

  

 

 

 

总结

在此过程中，我发现只要修改了img的width属性，高度会等比例的去缩放，哈，太好了，之前我以为还要自己去计算比例呢！