Html 设置内联图像的最大宽度会打断容器宽度

设置转盘内图像的

max width

样式值会打断容器的宽度。即使“最大宽度”值不会影响图像的实际宽度，也会发生这种情况。我不明白为什么会这样

我为此创建了一个JSFIDLE，因为我无法以其他方式解释此问题：

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

--

编辑。我试图在这里解释这个问题：

因此，我将图像内联到一个容器中。容器通过使用

空白：nowrap

强制项目内联，并且图像具有

内联块和显示样式。如果有必要，此容器的位置设置为绝对。目前一切都很好。容纳图像的容器具有正确的宽度（根据内部图像）。现在，如果我为图像设置
max width:100%
，则容器宽度被破坏。即使图像大小不变，宽度也不再正确。我找不到这样的逻辑

请查看JSFIDLE以获得更好的解释。
图像的最大宽度与包含的元素相关

因此，图像上的最大宽度：100%表示“使用100%的“.item”。.item不受进一步限制，通过使用“内部”上的位置：绝对，您已将此元素设置为100%（视口）

尝试将“border:1px solid red”添加到#internal和#container中以查看元素的绘制位置

只要没有具体说明将要发生什么，我们就可以使用容器。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 */
}

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

max width:100%
意味着浏览器必须将某个百分比值转换为绝对值。如果祖先具有
width:auto
（顺便说一下，这是默认值）并且处于绝对位置，则可能会产生意外结果

在这种情况下，百分比值没有什么意义，100%也可以解释为元素本身的100%——而不是父元素/祖先元素的100%

如果要在此处使用百分比值，应确保已清楚地设置了祖先的宽度（设置为除
自动
之外的其他值）。但是，这可能会阻止
#内部
包装器动态调整其宽度以包装其所有
.item
子项

最后，简单/难看的解决方案可能是最好的：。（例如
#container
的像素宽度）

PS：我创建了。也许你会发现它很有用。
在containers类中添加overflow:hidden可以解决你的问题吗？@Barry_127谢谢你的建议。不幸的是，它似乎没有效果（@K.Daniek如果你查一下fiddle，我想你会明白的。很抱歉没有对描述进行解释，但我不知道如何用文字来解释：（这是一个非常具体的问题。在这两种情况下，#容器对我来说都有500px…1050是图像的总和<代码>#容器<代码>总是有相同的宽度。只有<代码>#内部的宽度在变化。我理解。谢谢你的解释。但是你能解释一下为什么图像在将最大宽度设置为100%时没有出错吗？我知道将最大宽度设置为100%在这里不是很有用，但如果你检查一下：你会发现图像的大小似乎是正确的。事实上，我认为我可以接受这个答案。将最大宽度设置为100%在这里没有意义，我需要删除它并重构我的代码，这样我就不必设置它。感谢我的特殊情况，这不会起作用，因为我必须支持但是谢谢！那真的很好！