Firefox 中的 Flex 会自动缩小图像，但在 Chrome 中不会

中不会

关注

发信

关注(28)粉丝(399)

Firefox 中的 Flex 会自动缩小图像，但在 Chrome 中不会

本文介绍了Firefox 中的 Flex 会自动缩小图像，但在 Chrome 中不会的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

窗口宽度:
<div style="display: flex"><img src="https://unsplash.it/400/225?image=10" alt="1"><img src="https://unsplash.it/400/225?image=11" alt="2"><img src="https://unsplash.it/400/225?image=12" alt="3">

<h1>包裹在 500px 宽的 div 中:</h1><div style="width: 500px; overflow: auto"><div style="display: flex"><img src="https://unsplash.it/400/225?image=10" alt="1"><img src="https://unsplash.it/400/225?image=11" alt="2"><img src="https://unsplash.it/400/225?image=12" alt="3">

这是在 Firefox 中的结果:

Chrome 中的结果如下:

如您所见，在 Firefox 中，图像已被很好地缩小和调整大小，因此所有图像都可以在一行中显示，无需换行或裁剪.在 Chrome 上，图像保持其原始大小，这会导致在小窗口或 div 中进行裁剪.

这是预期的吗?难道我做错了什么?如何在 Firefox 和 Chrome 中获得相同的结果?

解决方案

这些是 flex 容器中的初始设置:

flex-grow: 0
flex-shrink: 1
flex-basis: auto

简写为:

flex: 0 1 auto

因此，即使您没有在代码中指定这些规则，它们也适用于图像.

图像不能增长，它们可以缩小(同样且刚好足以避免容器溢出)，并且它们最初的大小为其自然宽度 (400 像素).

这就是您在 Firefox 中看到的内容.图像正在缩小以很好地适应容器.

在 Firefox 中，弹性规则覆盖图像的自然尺寸.

然而，在 Chrome 中，情况正好相反.以图片尺寸为准.

简单的跨浏览器解决方案是将图像包装在另一个元素中，因此这个新包装器成为 flex 项并采用默认的 flex: 0 1 auto，无需覆盖任何内容.

img {宽度:100%；}

窗口宽度:
<div style="display: flex"><span><img src="https://unsplash.it/400/225?image=10" alt="1"></span><span><img src="https://unsplash.it/400/225?image=11" alt="2"></span><span><img src="https://unsplash.it/400/225?image=12" alt="3"></span>

<h1>包裹在 500px 宽的 div 中:</h1><div style="width: 500px; overflow: auto"><div style="display: flex"><span><img src="https://unsplash.it/400/225?image=10" alt="1"></span><span><img src="https://unsplash.it/400/225?image=11" alt="2"></span><span><img src="https://unsplash.it/400/225?image=12" alt="3"></span>

就遵守规范指南的浏览器而言，似乎应该是 Firefox.在 flex 容器中，应该以 flex 规则为准:

7.1.flex速记

当一个框是一个弹性项目时，会参考 flex 而不是 main size 属性来确定框的主要大小.

弹性项目的主要尺寸属性是width 或 height 属性.

我说 Firefox 似乎"是正确的，因为规范说 flex 规则应该优先于 CSS width 和 height 属性.

当然，这种情况下图像的尺寸并没有在 CSS 中定义.它们是图像的自然尺寸.因此，这种情况可能有待解释，Chrome 可能不会违反任何准则.

然而，在另一个场景中，height 属性是一个因素，Firefox 坚持使用 flex，而 Chrome 使用 height:为什么 Firefox 不支持 flexed div 的高度，而 Chrome 支持?

<h1>Window width:</h1>

<div style="display: flex">
  <img src="https://unsplash.it/400/225?image=10" alt="1">
  <img src="https://unsplash.it/400/225?image=11" alt="2">
  <img src="https://unsplash.it/400/225?image=12" alt="3">
</div>

<h1>Wrapped in 500px wide div:</h1>

<div style="width: 500px; overflow: auto">
  <div style="display: flex">
    <img src="https://unsplash.it/400/225?image=10" alt="1">
    <img src="https://unsplash.it/400/225?image=11" alt="2">
    <img src="https://unsplash.it/400/225?image=12" alt="3">
  </div>
</div>

This is what the result looks like in Firefox:

This is what the result looks like in Chrome:

As you can see, in Firefox, the images have been nicely shrunk and resized, so that all there images fit in one line without wrapping or cropping. On Chrome, the images remain in their original sizes, which causes cropping in small windows or divs.

Is this expected? Am I doing something wrong? How can I get the same result in both Firefox and Chrome?

解决方案

These are initial settings in a flex container:

flex-grow: 0
flex-shrink: 1
flex-basis: auto

The shorthand would be:

flex: 0 1 auto

Therefore, even though you haven't specified these rules in your code, they apply to the images.

The images cannot grow, they can shrink (equally and just enough to avoid overflowing the container), and they are initially sized to their natural width (400px).

This is what you're seeing in Firefox. The images are shrinking to fit nicely within the container.

In Firefox, flex rules are overriding the natural dimensions of the image.

In Chrome, however, the reverse is true. The dimensions of the images are prevailing.

The simple cross-browser solution is to wrap the images in another element, so this new wrapper becomes the flex item and takes on the default flex: 0 1 auto, and nothing needs to be overridden.

img {
  width: 100%;
}

<h1>Window width:</h1>

<div style="display: flex">
  <span><img src="https://unsplash.it/400/225?image=10" alt="1"></span>
  <span><img src="https://unsplash.it/400/225?image=11" alt="2"></span>
  <span><img src="https://unsplash.it/400/225?image=12" alt="3"></span>
</div>

<h1>Wrapped in 500px wide div:</h1>

<div style="width: 500px; overflow: auto">
  <div style="display: flex">
    <span><img src="https://unsplash.it/400/225?image=10" alt="1"></span>
    <span><img src="https://unsplash.it/400/225?image=11" alt="2"></span>
    <span><img src="https://unsplash.it/400/225?image=12" alt="3"></span>
  </div>
</div>

In terms of which browser is adhering to spec guidance, it appears that would be Firefox. In a flex container, flex rules should prevail:

I say Firefox "appears" to be correct because the spec is saying that flex rules should prevail over the CSS width and height properties.

Of course, the dimensions of the images in this case are not defined in CSS. They are the natural dimensions of the image. So this scenario may be left open for interpretation, and Chrome may not be violating any guidelines.

However, in another scenario, where the height property was a factor, Firefox stuck with flex, while Chrome went with height: Why is Firefox not honoring flexed div's height, but Chrome is?

这篇关于Firefox 中的 Flex 会自动缩小图像，但在 Chrome 中不会的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-01 10:44