当使用“超链接”容器时,屏幕大小不会缩小

这个问题与超链接无关。你可以用任何元素包装图像(试试 span 或者 div )它的效果和 a 容器

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

当您将元素设置为 display: flex (或 inline-flex )建立一个flex容器。

只有flex容器的子项是flex项。 子容器之外的flex容器的后代不是flex项,不接受flex属性。

以下是三个弹性项:

• <a href=""><img src="flash-tooltip.png"></a>
• <img src="html-tooltip.png">
• <img src="portables-tooltip.png">

这个 img 第一个元素不是弹性项。它是用塑料包装的 A. 元素,因此是弹性项的子项。

两个 img 由于flex容器上的两个默认设置,项目可能会收缩:

1. flex-wrap: nowrap ~flex项目必须保持在一条线上
2. flex-shrink: 1 ~flex物品允许收缩,以防止其溢出容器

如果你换成 flex-wrap: wrap 和/或 flex-shrink: 0 这个 img 物品不再缩水。

这个 A. 由于另一个默认设置,项目不会收缩: min-width: auto ,这意味着flex项目不能小于其内容的大小。在这种情况下 A. 项目不能缩小到图像宽度以下。

可以通过添加 min-width: 0 到你的代码。

#container {
  display: flex;
}

span {
  min-width: 0;
  display: flex;
}

img {
  min-width: 0;
}

<div id="container">
  <span><img src="http://i.imgur.com/60PVLis.png"></span>
  <img src="http://i.imgur.com/60PVLis.png">
  <img src="http://i.imgur.com/60PVLis.png">
</div>

更多信息:

• Why don't flex items shrink past content size?
• Proper use of flex properties when nesting flex containers

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

如果您添加以下内容。

<style>

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

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

我不知道flexbox有这样的规则,需要你设置图片的最大宽度,使项目响应/缩小,如果他们有一个超链接连接。

所以,在chrome中尝试了一下:只有现在锚定的图像缩小了,其他两个保持不变。FireFox 3都会缩小,但chrome只会缩小环绕着超链接的图像。

尝试将超链接环绕在其他两张图片周围,在chrome中,它们都可以很好地缩小。

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

很难说没有看到你的CSS,但你可能没有选择里面的图片 <a> 标签。如果你改变你的CSS来选择在 <a> 标签,应该很好用。

我已经添加了完整的工作解决方案。多亏了这里的许多人提供了各种各样的方法。所以,这是为其他可能正在挣扎的人准备的。

首先让我们来设置样式。

<style>

img {
max-width: 100%;
width: 100%;
min-width: 0;
min-height: 0;
}

</style>

添加 最小宽度:0; | 最小高度:0; 这似乎有些过头了,但使用chrome,它显然比将其设置为auto要好得多;

由于它使用flexbox,我们不添加通常的 宽度:33.33%; 即使有3张图片。在flexbox中,这将使它们在100%宽的分区内相距很远。

这是我艰难发现的真正重要的部分。

你必须使用其中一种 宽度:100% 在图像上,或者 最大宽度:100%; 否则,(在Chrome上,不添加100%宽度或最大宽度:100%;当你最小化浏览器以测试其响应性时,它不会弯曲/收缩。)

因此,接下来要保持3幅图像的完美纵横比,请记住将每幅图像包含在自己的div容器中。否则,它们会收缩,但只会像它们那样向上倾斜。

正如你所看到的,第一个图像甚至被包装在一个超链接中,但因为它在自己的div中,它会收缩和增长,与其他图像完全齐平和内联。这将节省使用额外标记的时间,并节省添加span标记的时间,然后使其成为包含超链接的flex容器。我两种方法都试过了,这是最简单的方法。

我已经为flexbox容器使用了内联样式。 (坏习惯)

<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>

别忘了关掉最后一部/第二部,真是太棒了!

我就是这样做的。在许多浏览器中进行了测试,效果非常好。甚至在手机和平板电脑上。

如果你不喜欢flexbox?你可以用常规的浮动来做同样的事情。 I've included this same method as above, only this time in a float: version.