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

【问题标题】：How to set width and height of slideshow dynamically如何动态设置幻灯片的宽度和高度
【发布时间】：2014-02-15 08:25:27
【问题描述】：

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

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

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

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

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

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

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

当我在函数中分配一个高度值（即 600 像素）时，幻灯片会以最大高度加载，但在页面缩小时不会缩小：http://www.centredelafontaine.be/testpage1.html

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

谁能帮我解决这个问题？

【问题讨论】：

【解决方案1】：

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

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

如果你不能解决，请给我回复，我会制作一个演示 html

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

您可以将 Portrait 属性设置为 true 并且图像不会被裁剪。

jQuery('#your-camera-gallery').camera({ 肖像：真实， });

【讨论】：