图像轮播不适用于溢出：隐藏

Question

以下示例中有一些我无法理解的内容：

考虑以下两种情况：

1. 我删除了<div class="carousel"> 。 在 CSS 下 when overflow: hidden 被注释（在图像容器中）transform: translateX(-100%); 工作正常并显示第二张图像。 但是当溢出：隐藏启用时，一切都消失了。

2. 当<div class="carousel">插入时，一切正常。

请帮助我理解这个问题。 如果需要，我会提供额外的信息。

 .carousel { overflow: hidden; height: 500px; width: 500px; }.image-container { display: flex; width: 500px; height: 500px; overflow: hidden; }.image-container { transform: translateX(-100%); } img { -o-object-fit: cover; object-fit: cover; height: 500px; width: 500px; }

 <:-- <div class="carousel"> --> <div class="image-container"> <img src="https.//via.placeholder.com/500x500?png:text=nature-1" alt="" class="one"> <img src="https.//via.placeholder.com/500x500?png:text=nature-2" alt="" class="two"> <img src="https.//via.placeholder.com/500x500?png:text=nature-3" alt="" class="three"> <img src="https.//via.placeholder.com/500x500?png:text=nature-4" alt="" class="four"> <img src="https.//via.placeholder.com/500x500?png?text=nature-5" alt="" class="five"> </div> <!-- </div> -->

Answer 1

如果您在图像容器上设置了overflow:hidden ，则任何超出其尺寸的图像都应该被隐藏。 使用transform:translateX(-100%)将容器移到一边不会改变这一点。 第一个图像在图像容器中仍然可见，但整个图像容器已移出视图。

您可以通过.image-container>*{transform:translateX(-100%)}样式来摆脱外部 div 以在图像容器中移动图像本身，而不是移动容器。 这可能会导致页面的图形处理开销稍微增加一些，因为它会转换每个图像而不是图像的一个容器，但我无法想象这实际上会很明显。

Answer 2

不确定为什么要删除.carousel。 IMO 它应该包装 your.image-container 和 .image-container 不应该有overflow: hidden 。 尝试为.carousel添加边框 - border: 1px solid red; 并查看 your.image-container 相对于.carousel 的位置。