Question

我在CSS3中制作了淡入淡出的幻灯片。现在我必须将它插入到div容器中，使幻灯片显示的宽度为父级的100％和适当的高度。如果它是单个图像，我可以很容易地做到这一点：

<img src='url' style='border: 4px solid #dedede; width: 100%; margin-bottom: 3%;' />";

但是为了工作，幻灯片显示需要所有图像重叠，而我能够找到的唯一方法是将这些图像置于绝对位置。当我这样做时，div容器不再在我的图像周围延伸，所以无论我做什么，我最终都会使用拉伸图像，或者在调整页面大小时使用太大或太小的容器。我看到的唯一解决方法是使用10-15个媒体查询来调整每个页面宽度的div高度，并保持其高度略大于幻灯片。但是没有更好的解决方案，因为这是一个糟糕的解决方案.. 这是我的幻灯片代码：

            .slide{position: relative;}
        .slide figure{
            border: 4px solid #dedede;
            margin: 0;
            position: absolute;
            opacity: 0;
            }
        .slide figure:nth-child(1) {animation: xfade 20s 0s infinite;}
        .slide figure:nth-child(2) {animation: xfade 20s 6s infinite;}
        .slide figure:nth-child(3) {animation: xfade2 20s 12s infinite;}
        @keyframes xfade{
            0%{opacity: 0;}
            10%{opacity: 1;}
            30%{opacity: 1;}
            40%{opacity: 0;}
            }
        @keyframes xfade2{
            0%{opacity: 0;}
            10%{opacity: 1;}
            40%{opacity: 1;}
            50%{opacity: 0;}
            }

Answer 1

在我们的评论讨论之后，您最终得到了5种可能的解决方案（由于它们需要处理，因此无法完美解决）：

媒体查询（这可能是最好的，因为你已经知道如何做得更好）
Js调整大小（获得最大的图像大小和设置容器尺寸，这将是不错的，但在较慢的PC上，用户可能会注意到调整时的快速＆＃34;闪烁）
PHP尺寸设置：如果您在加载页面之前有PHP代码，您可以在那里获取图像大小，并使用它来设置容器的尺寸（这是我猜的第二个 - 我会做什么）
图像＆＃34;剪切＆＃34;：设置固定高度，然后使用隐藏溢出来剪切不需要的内容
设置标准并仅使用该尺寸的图像（这可能不符合您的需要）。

在CSS中重叠相对定位的图像

1 个答案: