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

我已经建立了一个网页，使用一个名为slideshow的div中的图像。div的最大宽度应为1600px，最大高度应为600px（此处使用的原始jpg的宽度和高度），并在屏幕变小或调整大小时动态缩小

这很好，因为图像的行为是由CSS设置的，如下所示：

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

现在，我想通过使用Pixedelic中的照相机幻灯片替换图像来实现相同的效果。但是在这里，我无法使用.slideshow img{}控制图像，因为脚本使用div而不是image标记

摄影机幻灯片的宽度和高度由jQuery函数控制。 我已将幻灯片放在一个.slides分区中，我试图通过CSS控制该分区，如下所示：

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

（溢出保持可见，以查看发生的情况）

当我在函数中指定一个高度值（即600px）时，幻灯片将以其最大高度加载，但在页面缩小时不会收缩：

当我在函数中将“高度”和“宽度”值留空时，幻灯片会在调整大小时缩小，但会以800px（？）的高度打开，并裁剪内部更大的图像，溢出下面的div：

---

有人能帮我解决这个问题吗

将

img

标记放在幻灯片所包含的

div

中，您将能够通过CSS代码修改这些图像（幻灯片元素）属性

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

---

如果你不能解决这个问题，请给我一个答复，我将制作一个演示html

仅设置图像最小高度。幻灯片容器将取决于图像高度。表示无需设置幻灯片放映容器高度。

您可以将“纵向”属性设置为true，图像将不会被剪切

jQuery('#your-camera-gallery').camera({ portrait: true, }); jQuery（“#你的相机库”）.camera（{ 肖像：是的， });

---

下面是一个带有简单图像的工作示例：。测试页面1和2加载相同的内容，两者的高度都大于测试页面3。为什么不用百分之一的高度呢？谢谢你，扎克。在jQuery函数中使用高度和宽度百分比是个好主意。