我在 Firefox 上有一个奇怪的问题，听起来有点像这个:https://bugzilla.mozilla.org/show_bug.cgi?id=829958但它在几年前就已修复。
我在包装器中有一个大图像，该图像具有 width: auto;高度:100%；。应用于图像的唯一约束是 height: 100%;。
图像在所有浏览器上正确缩小到可用的最大高度。在几乎所有浏览器上，包装器也会缩小到图像的新(有效)大小。这不是 Firefox 上的行为(在 50+ 上测试过)，Firefox 确实缩小了图像，但不是将图像的原始宽度保持为其自身宽度的包装器。
这里有一个代码笔可以更好地模拟这个问题:https://codepen.io/Tronix117/pen/MEogMv
img-wrapper 不能在 display: inline; 中因为应用了效果。如果需要，可以添加更多中间 div。
在 codepen 上，不要介意 scroll-wrapper 的固定宽度，它是一个动态值，以及所有转换值。
图片可以有不同的宽度和高度，CSS 应该是响应式的。
想法是使用 Swiper 库生成包含不同图像的 coverflow。
我一整天都在为这个问题苦苦挣扎，所以感谢您的帮助!
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>
最佳答案
非常有趣的问题!
这很可能是 Firefox 的一个错误，尽管我认为这可能是由于 Firefox 无法为所有级联 height: x%; 找到正确的引用 height 值引起的> 嵌套元素。
所以我给了 #viewport 一个明确的 height 值:height: calc(100vh - 40px); 而不是来自 顶部:20px；底部:20px；。它确实有效!
关于html - Firefox - 图像缩小时容器不适应内容的宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46480358/