记录不同浏览器中，flex布局下图片不保持宽高比的问题以及IE下图片不显示的问题

问题重现

我在页面上写了一个img标签，因为想让它的大小跟随浏览器窗口尺寸改变，所以在设置样式的时候，直接让它的宽width为父元素（这里就是整个窗口）的100%，高height因为要保持宽高比，所以设置为auto。

<div style="display: flex;">
    <img src="1.png" style="width:100%;height:auto"/>
  </div>

而我这个img标签的父元素用了flex布局。

写的时候因为用的是chrome，没看出来有什么问题，等全部写完复测的时候，我用QQ浏览器跑了一下，发现图片变形了。它的高height并不是根据宽width自动改变，而是自始至终都保持着原图的高度。

chrome下：

QQ浏览器下：

可以看到，虽然因为工具栏的设置等导致宽width有些许偏差，但这个高height差的是很多的，图片变形拉伸了，没有保持宽高比。

那么原图尺寸是多少呢？没错，是612X612的（宽高比1:1）。

然后我们再去掉父元素的flex布局看一下：

<div>
    <img src="1.png" style="width:100%;height:auto"/>
  </div>

chrome下没什么变化：

QQ浏览器下：

可以看到，它也能保持宽高比。

小结

我又尝试了其他较为常见的的浏览器，最后试下来（以下指的都是最新版浏览器，需要的可以去查他们对应的内核及版本），chrome，firefox，IE11不存在这个问题，QQ浏览器，遨游浏览器和搜狗高速浏览器是存在这个问题的。

360急速浏览器我也测了，但这个要单独说一下。因为我在两个版本上的效果是不一样的，9.5版本（内核63）是存在这个问题的，12.0版本（内核78）是不存在这个问题的。

原因的话，就是不同浏览器的内核不同，以及内核的版本不同，没啥好说的。那本文的目的呢，就是记录一下这个问题，因为上文中“父元素使用flex布局，子元素图片跟随父元素，只指定宽或高，另一个自动根据宽高比去调整”的这种写法对我个人来说用的还是很多的。因此我必须要注意这种写法的兼容性。同时也希望其他和我一样写法的小伙伴注意到这个问题。

那这个问题的解决方法也有很多种，这个大家应该都比我熟练。考虑到可能根据关键字搜到我这篇文章的小伙伴中存在零基础的，这里也附一种最简单的解决方法，就是用js根据图片宽高比和父元素的宽/高计算出需要的图片的高/宽再赋值上去（别忘记用onresize处理一下缩放浏览器的情况，438/3840就是我这张图的宽高比）：

<script>
	initTopPicHeight();
    window.onresize = function () {
     
        initTopPicHeight();
    };
    function initTopPicHeight() {
     
        document.getElementById('top_pic').style.height = 438 / 3840 * window.innerWidth + 'px';
    }
</script>

IE下图片不显示的问题

这个问题是我在写轮播图的时候遇到的。当时美工那边只给了我一张例图，我为了测试轮播的效果，就去网上随便下了几张图。结果，在chrome上写完测试完没有问题，用IE一测又挂了。我下的那几张图无法显示。

看了一下控制台，没有任何报错，看了一眼图片地址，也都是正确的。那么为什么我自己下载的几张图在IE上无法显示呢？

这个时候我想起来，我在下载完之后，因为发现这些图的格式都是jpg的，而我代码里循环写图片地址的时候，因为偷懒，都是写的png格式的，于是我就手动处理了一下这些下载的图片格式，但是，我没有用另存为的方式换格式保存，而是直接通过修改文件后缀去修改格式的。

但实际上，更改后缀并没有修改文件本来的格式。chrome虽然可以识别更改成png格式的文件本来格式是jpg，然后把它显示出来，但是IE并不能。它会认为你的文件后缀和文件格式不一致，从而拒绝显示。

这一点其实你用一些比如PS之类的软件，把一张原本是jpg格式的图片文件修改后缀成png然后拖进PS中，它也是无法打开的。

因此，如果要修改文件格式，还是通过另存为或格式转换等方法去改变文件格式，而不要轻易修改文件后缀名。

上述两个问题都是非常基础的小问题，但非常容易被我们忽视。前端开发中会遇到各种奇怪的兼容性问题，因此我们在写完之后一定要在各种浏览器上去测试，这样才能发现很多潜在问题。