Html Flex image赢得'；当容器是超链接时，不会随屏幕大小收缩

有人能告诉我这是flexbox的一个未记录错误，还是我只是做错了？我在一个div容器中有3个图像排成一行。这很简单，因为它得到了人们

在没有任何超链接的情况下，所有3幅图像都会像它们应该的那样完美地缩小

<div style="width: 100%; margin: 0 auto; display: flex; justify-content: center;">
  <a href=""><img src="flash-tooltip.png"></a>
  <img src="html-tooltip.png">
  <img src="portables-tooltip.png">
</div>

现在，在所有设备上查看时，只有三分之二的图像会正确缩小，这取决于通过视口手动最大化地拖动浏览器

唯一不会改变形状或大小的图像是带有超链接的图像。所以，我把第一张图片上的超链接去掉了。并决定将其放在第二张图像上进行测试，现在第一张图像和第三张图像收缩良好

但是，第二张图片的大小保持不变？然后尝试将超链接添加到所有图像，但没有一个图像更改为与屏幕宽度匹配

---

如果我说flex项目是图片，那么如果它们有超链接lol，它们就不会flex，这是不是错了？这肯定不是事实，对吗

很难说没有看到CSS，但您可能没有选择

标记中的图像。如果您更改CSS以选择

标记内的图像，它应该可以正常工作

很难说没有看到CSS，但您可能没有选择

标记中的图像。如果您更改CSS以选择

标记内的图像，它应该可以正常工作

我不知道为什么，但这解决了问题。我想知道为什么，因为我无法在任何HTML/CSS文档中找到有关此问题的任何信息

如果您添加以下内容

<style>

    img {
    max-width: 100%;
    height: auto;
    }
</style>

img{
最大宽度：100%；
高度：自动；
}

然后，所有3张图片都会完美发光。即使他们有超链接。有趣的是，如果你只设置宽度：100%；然后，带有超链接的图像保持与图像完全相同的大小，而所有其他没有超链接的图像放大到容器的100%大小

我不知道flexbox有这样的规则，需要您设置图像最大宽度，以使项目响应/缩小，如果他们附加了超链接

所以，在chrome中尝试了一下：现在只有带有锚的图像缩小，其他两个保持相同大小。FireFox 3都会缩小，但chrome只会缩小环绕着超链接的图像

尝试将超链接环绕在其他两幅图像周围，在chrome中，它们都可以很好地缩小

---

有人能解释一下发生了什么事吗？如何在超链接上设置最大宽度：和最大高度：自动？

我不知道为什么，但这解决了问题。我想知道为什么，因为我无法在任何HTML/CSS文档中找到有关此问题的任何信息

如果您添加以下内容

<style>

    img {
    max-width: 100%;
    height: auto;
    }
</style>

img{
最大宽度：100%；
高度：自动；
}

然后，所有3张图片都会完美发光。即使他们有超链接。有趣的是，如果你只设置宽度：100%；然后，带有超链接的图像保持与图像完全相同的大小，而所有其他没有超链接的图像放大到容器的100%大小

我不知道flexbox有这样的规则，需要您设置图像最大宽度，以使项目响应/缩小，如果他们附加了超链接

所以，在chrome中尝试了一下：现在只有带有锚的图像缩小，其他两个保持相同大小。FireFox 3都会缩小，但chrome只会缩小环绕着超链接的图像

尝试将超链接环绕在其他两幅图像周围，在chrome中，它们都可以很好地缩小

---

有人能解释一下发生了什么事吗？如何在超链接上设置最大宽度：和最大高度：自动？

该问题与超链接无关。您可以将图像包装在任何元素中（尝试

span

或

div

），其效果与

a

容器相同

问题在于flex容器的层次结构

当您将一个元素设置为

display:flex

（或

inline flex

）时，您就建立了一个flex容器

只有flex容器的子项是flex项。子级之外的flex容器的子代不是flex项，也不接受flex属性

以下是三个弹性项：

第一个元素中的

img

不是弹性项。它由

a

元素包装，因此是弹性项的子项

由于flex容器上的两个默认设置，两个

img

项可以收缩：

~flex项目被强制保留在一行上

~flex项目允许收缩，以防止其溢出容器

如果切换到

flex-wrap:wrap

和/或

flex-shrink:0

则

img

项将不再收缩

a

项不会因为另一个默认设置而收缩：，这意味着弹性项不能小于其内容的大小。在这种情况下，

a

项不能缩小到图像宽度以下

您可以通过向代码中添加

最小宽度：0

来覆盖此设置

#容器{
显示器：flex；
}
跨度{
最小宽度：0；
显示器：flex；
}
img{
最小宽度：0；
}

---

问题与超链接无关。您可以将图像包装在任何元素中（尝试

span

或

div

），其效果与

a

容器相同

问题在于flex容器的层次结构

当您将一个元素设置为

display:flex

（或

inline flex

）时，您就建立了一个flex容器

只有flex容器的子项是flex项。子级之外的flex容器的子代不是flex项

<div style="border: 2px solid red; margin: 0 auto; display: flex; justify-content: center;">

<div>
<a href=""><img src="flash-tooltip.png"></a>
</div>

<div>
<img src="html-tooltip.png">
</div>

<div>
<img src="portables-tooltip.png">
</div>
</div>