Question

我在Firefox上有一个奇怪的问题，听起来有点像这样：https://bugzilla.mozilla.org/show_bug.cgi?id=829958但是几年前就修好了。

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

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

这是一个可以更好地模拟问题的代码：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>

Answer 1

非常有趣的问题！

这很可能是Firefox的一个错误，但我认为这可能是因为Firefox无法为嵌套元素的所有级联height找到正确的引用height: x%;值。

所以我给了#viewport一个明确的height值：height: calc(100vh - 40px);而不是来自top: 20px; bottom: 20px;的隐含值。它确实有用！

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

Firefox - 容器在缩小图像时不会使宽度适应内容

1 个答案: