Question

为轮播内的图像设置max-width样式值会破坏容器的宽度。即使max-width值不会影响图像的实际宽度，也会发生这种情况。我无法弄清楚为什么会这样。

我创建了一个JSFiddle，因为我无法解释这个问题：https://jsfiddle.net/atmp9ymr/1/

所以我基本上都在问为什么会这样？有没有办法来解决这个问题？任何帮助将不胜感激。

-

编辑。我试着在这里解释一下这个问题：

所以我在一个容器内嵌了图像。容器使用white-space: nowrap强制项目内联，图像具有inline-block和显示样式。如果重要，此容器的位置设置为绝对。目前一切都很好。保存图像的容器具有正确的宽度（根据内部图像）。现在，如果我为图像设置max-width: 100%，则容器宽度会被破坏。即使图像尺寸没有改变，宽度也不再正确。我找不到那个逻辑。

请查看jsfiddle以获得更好的解释。

Answer 1

图像的最大宽度与包含元素有关。

因此，最大宽度：100％的图像意味着＆＃34;使用100％的＆＃34; .item＆＃34;。 .item没有进一步限制，通过在#inner上使用position：absolute，您已将此元素设置为100％（视口）。

尝试添加＆＃34; border：1px solid red＆＃34;到#inner和#container看看，绘制元素的位置。

只要不存在必须发生的事情，wenn尺寸就会发生容器，这种情况就会发生。

Answer 2

Firefox，Opera和Chrome都有解决方法。

#inner {
  position: absolute;
  top: 0;
  display: flex; /* add display flex */
}

.item {
  display: block;
  vertical-align: top;
  width: -moz-max-content; /* this will stretch the items to maximum width */
  width: -webkit-max-content; /* this will stretch the items to maximum width */
  width: max-content; /* for future */
}

查看this jsfiddle。

Answer 3

这里的挑战是将百分比宽度与推断（自动）宽度混合，并将其与绝对定位相结合。

max-width:100%表示浏览器必须将百分比值转换为绝对值。如果祖先有width:auto（顺便说一下是默认值），并且绝对定位，这可能会产生意外结果。

在这种情况下，百分比值没有多大意义，100％也可能被解释为 100％元素本身 - 不是100％的父母/祖先。

如果你想在这里使用百分比值，你应该确保祖先＆＃39;宽度明确设置（除auto以外的其他内容）。但是，这可能会阻止#inner包装器动态调整其宽度以包装其所有.item个子项。

最后，简单/丑陋的解决方案可能是最好的：Set the max-width to an absolute value。（例如#container的像素宽度。）

PS：我创建了a variation of your case。也许你会发现它很有用。

设置内嵌图像的最大宽度会破坏容器宽度

3 个答案: