如何动态设置幻灯片的宽度和高度

Question

我在一个名为幻灯片的div中使用图像设置了一个网页。 div应该是最大宽度为1600px，最大高度为600px（此处使用的原始jpg的宽度和高度），并在屏幕较小或调整大小时动态缩小。

这样可以正常工作，因为图像的行为由CSS设置如下：

.slideshow img{
    margin:0 auto;
    width: 100%;
    max-width: 1600px;
    min-width: 900px;
}

现在我想用Pixedelic的Camera Slideshow替换图像来达到同样的效果。但是在这里我无法使用.slideshow img {}控制图像，因为脚本使用div而不是图像标记。

相机幻灯片的宽度和高度由jQuery函数控制。我把幻灯片显示在.slides div中，我尝试通过CSS控制，如下所示：

.slideshow .slides{
    display: block;
    margin:0 auto;
    max-width: 1600px;
    max-height: 600px;
    overflow:visible;
}

（溢出是可见的，看看会发生什么）

当我在函数中指定高度值（即600px）时，幻灯片显示加载到它的最大高度，但在页面调整大小时不会收缩：http://www.centredelafontaine.be/testpage1.html

当我在函数中将高度和宽度值留空时，幻灯片显示会在调整大小时收缩但打开时的高度为800px（？）并在内部裁剪更大的图像，溢出下面的div：http://www.centredelafontaine.be/testpage2.html

任何人都可以帮我解决这个问题吗？

Answer 1

将img标记放在幻灯片包含的div中，您将能够通过CSS代码修改这些图像（幻灯片元素）属性。

<div id="image" div class="Slides w3-display-container">
    <img src="your_image.png" height="600" width="1600">
    </div>

如果你不能解决它，请给我一个答复，我会做一个演示HTML

Answer 2

仅设置图像最小高度。幻灯片容器将取决于图像高度。意味着无需设置幻灯片容器高度。