Firefox中的Flex自动缩小图像，但不是在Chrome中 [英] Flex in Firefox shrinks images automatically, but not in Chrome

问题描述

< pre-class =snippet-code-html lang-html prettyprint-override> < h1>窗口宽度：< / h1>< div style =display：flex> < img src =https://unsplash.it/400/225?image=10alt =1> < img src =https://unsplash.it/400/225?image=11alt =2> < img src =https://unsplash.it/400/225?image=12alt =3>< / div>< h1>包装在500像素宽的div中：< / h1>< ; div style =width：500px; overflow：auto> < div style =display：flex> < img src =https://unsplash.it/400/225?image=10alt =1> < img src =https://unsplash.it/400/225?image=11alt =2> < img src =https://unsplash.it/400/225?image=12alt =3> < / div>< / div>

结果看起来像在Firefox：

这是Chrome的结果：

正如您所看到的，在Firefox中，图像已经被很好地缩小和调整大小，以便所有的图像都可以在一行中进行合并，而不会进行包装或裁剪。在Chrome浏览器中，图片保持其原始大小，这会导致在小窗口或div中裁剪。

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

解决方案

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

• flex-grow：0


• flex-shrink：1


• flex-basis：auto
$


$ b

简写为：


$ li $ code > flex：0 1 auto

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

图像不能增长，他们可以收缩（同样，刚好足以避免溢出容器），他们最初的大小，以他们的自然宽度（400px）。

这是您在Firefox中看到的内容。在Firefox中，flex规则覆盖了图像的自然尺寸。

>

然而，在Chrome中，情况正好相反。图像的尺寸是普遍的。

简单的跨浏览器解决方案是将图像包装在另一个元素中，所以这个新的包装变成了flex项目并使用默认的 flex：0 1 auto ，并且不需要重写。

  img {width：100％;}  

 < h1>窗口宽度：< / h1>< div style =display：flex> < span>< img src =https://unsplash.it/400/225?image=10alt =1>< / span> < span>< img src =https://unsplash.it/400/225?image=11alt =2>< / span> < span>< img src =https://unsplash.it/400/225?image=12alt =3>< / span>< / div>< h1>包装在500像素宽div：< / h1>< div style =width：500px; overflow：auto> < div style =display：flex> < span>< img src =https://unsplash.it/400/225?image=10alt =1>< / span> < span>< img src =https://unsplash.it/400/225?image=11alt =2>< / span> < span>< img src =https://unsplash.it/400/225?image=12alt =3>< / span> < / div>< / div>  

哪个浏览器遵守规范的指导，它会出现，这将是Firefox。在flex容器中，以flex规则为准：

$ block $ $ b $ p -flexbox-1 /＃flex-propertyrel =nofollow noreferrer> 7.1。 flex
速记

， flex 被查阅，而不是主尺寸属性，以确定框的主尺寸。

主大小属性是 width 或 height 属性

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

当然，这种情况下图片的尺寸在CSS中没有定义。它们是图像的自然尺寸。因此，这种情况下可能会有解释，Chrome可能没有违反任何指导。

然而，在另一种情况下， height 属性是一个因素，Firefox坚持使用 flex ，而Chrome则使用 height ：为什么Firefox不尊重弯曲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:

7.1. The flex Shorthand

When a box is a flex item, flex is consulted instead of the main size property to determine the main size of the box.

The flex item’s main size property is either the width or height property.

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中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！