admin管理员组文章数量:1530286
问题重现
我在页面上写了一个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中，它也是无法打开的。
因此，如果要修改文件格式，还是通过另存为或格式转换等方法去改变文件格式，而不要轻易修改文件后缀名。
上述两个问题都是非常基础的小问题，但非常容易被我们忽视。前端开发中会遇到各种奇怪的兼容性问题，因此我们在写完之后一定要在各种浏览器上去测试，这样才能发现很多潜在问题。
版权声明：本文标题：记录不同浏览器中，flex布局下图片不保持宽高比的问题以及IE下图片不显示的问题 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1725799693a1043409.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论