admin管理员组文章数量:1566354
问题重现
我在页面上写了一个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://www.elefans.com/dongtai/1725799693a1043409.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论