Firefox - 当图像缩小时，容器不适应宽度内容

我在Firefox上有一个奇怪的问题，它听起来像这样：https://bugzilla.mozilla.org/show_bug.cgi?id=829958但它已在几年前修复。Firefox - 当图像缩小时，容器不适应宽度内容

我有一个大的图像里面有width: auto; height: 100%;的包装。应用于图像的唯一约束是height: 100%;。

图像在所有浏览器上正确缩小到可用的最大高度。在几乎所有浏览器上，包装也缩小到图像的新（有效）大小。这不是Firefox上的行为（在50+以上测试过），Firefox确实缩小了图像的大小，但不是保持原始图像宽度的包装器。

这里是一个codepen更好地模拟问题：https://codepen.io/Tronix117/pen/MEogMv

的img-wrapper不能在display: inline;，因为应用在它的影响。如果需要，可以添加更多中间div。

在codepen上，不要介意scroll-wrapper的固定宽度，它是一个动态值，以及所有转换值。

图片可以有不同的宽度和高度，CSS应该有反应。

这个想法是使用Swiper lib产生具有不同图像的覆盖流。

我一直在努力，所以感谢您的帮助！

CSS

html, 
body { 
    height: 100%; 
    width: 100%; 
} 

* { 
    padding: 0; 
    margin: 0; 
} 

#viewport { 
    position: absolute; 
    top: 20px; 
    bottom: 20px; 
    left: 20px; 
    right: 20px; 
    overflow: hidden; 
    display: block; 
    perspective: 1200px; 
    transform-style: preserve-3d; 
} 

#scroll-wrapper { 
    display: block; 
    position: relative; 
    width: 3000px; 
    height: 100%; 
    transform-style: preserve-3d; 
    transform: translate3d(-500px, 0, 0); 
} 

.img-wrapper { 
    display: inline-block; 
    white-space: nowrap; 
    overflow: hidden; 
    width: auto; 
    height: 100%; 
    position: relative; 
    transform-style: preserve-3d; 
    border: 4px solid red; 
} 

img { 
    height: 100%; 
} 

#img-wrapper-1 { 
    border-color: blue; 
    transform: translate3d(0px, 0px, -500px) rotateX(0deg) rotateY(30deg); 
    z-index: -1; 
} 

#img-wrapper-3 { 
    border-color: green; 
    transform: translate3d(0px, 0px, -500px) rotateX(0deg) rotateY(-30deg); 
    z-index: -1; 
}

HTML

<html> 
    <body> 
    <div id="viewport"> 
     <div id="scroll-wrapper"> 
     <div id="img-wrapper-1" class="img-wrapper"> 
      <img src="http://via.placeholder.com/2000x1200" /> 
     </div> 
     <div id="img-wrapper-2" class="img-wrapper"> 
      <img src="http://via.placeholder.com/2000x1200" /> 
     </div> 
     <div id="img-wrapper-3" class="img-wrapper"> 
      <img src="http://via.placeholder.com/2000x1200" /> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

来源

2017-09-29 Tronix117

非常有趣的问题！

这很可能是Firefox的一个错误，尽管我认为这可能是由于Firefox无法为嵌套元素的所有级联height: x%;找到正确的参考值height。

因此，我给#viewport明确height值：height: calc(100vh - 40px);而不是从top: 20px; bottom: 20px;隐含一个。它确实有效！

演示：https://codepen.io/anon/pen/eGRYqx

来源

2017-09-29 02:04:41 AVAVT

谢谢你，这个答案解决了这个具体问题，这样很好。但是，当应用于更复杂的布局时，如果我们不知道“40px”值，它将无法工作。让我们想象一下在div限制它缩小之前和之后的一些文本，现在让我们把我在上面使用的'viewport' div放在未知高度的div内。现在我们有一个动态高度的例子，它不能用'100vh - 40px'这种方式来解决。任何其他想法？ – Tronix117

你的例子对我来说听起来不合适。 div之前和之后的文本不会缩小它们，它们会换行到下一行或在容器外流动。这是HTML文档的本质，其中“首选宽度”是100％视口，“首选高度”未定义。他们接受并鼓励垂直滚动。除非它是您所说的flexbox，否则我不认为Firefox会有问题，因为flexbox确实提供了有关它们高度的内部元素信息。 – AVAVT

这是我在谈论的flexbox布局（我现在在移动设备上很难做出例子）。我找出了一个解决方案，通过删除弹性布局，并给出文本以及固定宽度以上的文本。如果你有兴趣，我会尽快回到另一个例子。 – Tronix117

Firefox - 当图像缩小时，容器不适应宽度内容

回答

相关问题