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

我用CSS3制作了淡入淡出的幻灯片。现在，我必须将其插入div容器中，以使幻灯片宽度为父级的100%，并且具有适当的高度。如果是一张图片，我可以轻松做到：

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

---

在我们的评论讨论之后，您得出了5个可能的解决方案，但不幸的是，这些解决方案都不完美，因为它们需要处理：

媒体查询这可能是最好的，因为你已经知道如何做得更好 Js resize获取最大图像大小并设置容器尺寸，这将很好，但在速度较慢的PC上，用户可能会注意到调整大小时快速闪烁 PHP维度设置：如果您在加载页面之前有PHP代码，您可以在那里获得图像大小，并使用它设置容器的维度，我想这是第二个最好的方法——这就是我要做的 图像剪切：设置固定高度，然后使用“溢出隐藏”来剪裁不需要的内容 设置一个标准，仅使用该尺寸的图像，这可能不适合您的需要。

---

这可能相当简单，也可能相当复杂，具体取决于您所知道的情况：案例1：如果您确实知道图像大小，则可以将容器尺寸设置为与最高的with/height相对应。案例2：如果你不知道这一点，根据你需要做的事情，有一些变通方法。我知道使用的图像大小，所以可以很容易地计算出高宽比。我不知道在任何特定时刻的确切大小，但是，因为它是一个响应性强的网站，宽度大约是身体的100%，其中宽度是视口-3.5%左右边距，类似这样的东西…这解决了宽度问题。加上宽度：93%；位置：相对位置；在容器和主体上{width:100%}。但是高度有点问题，因为它的高度必须以px为单位，或者它的父高度以px为单位。如果这对你来说无关紧要，最简单的方法就是设置一个像素数，我猜它可以容纳700px左右的任何东西，但这在小型显示器上会出现问题。。。它添加了一个卷轴。这是我的观点，宽度根本不是问题，但高度是。是的，使用巨大的容器是我在这里试图避免的问题。是的，我会选择JS，只是我对CSS不熟悉，所以我认为可能有一些简单的CSS解决方案我找不到，但显然不是这样。非常感谢。

            .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;}
            }