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

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 < / p>

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

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

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

Answer 3

您可以将portrait属性设置为true，图片将不会被裁剪。

jQuery('#your-camera-gallery').camera({   
        portrait: true,
});