为内联图像设置最大宽度会破坏容器宽度答案

【问题标题】：Setting max width for inline images breaks container width为内联图像设置最大宽度会破坏容器宽度
【发布时间】：2016-10-13 13:05:38
【问题描述】：

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

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

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

--

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

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

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

【问题讨论】：

在容器类中添加溢出：隐藏是否可以解决您的问题？
@Barry_127 感谢您的建议。不幸的是，它似乎没有任何效果。 :(
@K.Daniek 如果您检查小提琴，我想您会理解的。很抱歉缺乏对描述的解释，但我不知道如何用语言来解释。 :( 这是非常具体的问题。
在这两种情况下，#container 对我来说都是 500px...1050 是图像的总和
#container 始终具有相同的宽度。只有#inner 的宽度在变化。

标签： html css

【解决方案1】：

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

所以图像上的 max-width: 100% 意味着“使用 100% 的“.item”。.item 没有进一步限制，并且通过在#inner 上使用 position:absolute，您已将此元素设置为 100%（视口）。

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

只要没有指定要发生什么，容器的大小超过容器，就会发生这种情况。

【讨论】：

我明白了。感谢您的解释。但是你能解释一下为什么将 max-width 设置为 100% 时图像没有搞砸吗？我知道在这里将 max-width 设置为 100% 并不是很有用，但是如果您检查一下：jsfiddle.net/atmp9ymr/4，您会看到图像的大小似乎正确。
我实际上认为我对这个答案很满意。在这里将 max-width 设置为 100% 在这里没有意义，我需要删除它并重构我的代码，这样我就不必设置它了。谢谢

【解决方案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。

【讨论】：

对于我的具体情况，这是行不通的，因为我必须支持 IE11，但谢谢！真是太好了！

【解决方案3】：

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

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

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

如果您想在此处使用百分比值，您应该确保清楚地设置祖先的宽度（设置为 auto 以外的其他值）。但是，这可能会阻止 #inner 包装器动态调整其宽度以包装其所有 .item 子级。

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

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

【讨论】：