Javascript 幻灯片以填充Div

我昨晚发布了一个关于这个问题的帖子，但我完全重写了它，因为我认为它让人困惑，我还提供了一个例子来说明我的问题

我有一个幻灯片，我想完全填充一个div。现在，如果有人从狭窄的浏览器视口访问我的网站，幻灯片将只填充宽度，而不是整个高度，因此在div底部留下空间

我希望幻灯片按比例缩放，以适合并覆盖整个div，即使需要从侧面进行裁剪。我的要求有意义吗

下面是一个示例：如果您现在从宽屏或全屏浏览器窗口访问它，图像可能会填满整个分区。但是如果您缩小窗口并刷新，您将在分区底部看到bg颜色。示例：

我怎样才能得到这个幻灯片来填充这个分区

谢谢

---

**我还应该补充一点，我并不是想让它作为背景填充屏幕。我只想让它填充分区。

您需要将图像的高度设置为100%，并自动设置宽度。这是因为图像是横向的。然后，确保将div.slideshow的overflow（可能只是overflow-x）属性设置为hidden。这将允许图像缩放到div（帧）而不是自身。下面是一个例子：

HTML
CSS
.幻灯片放映{
身高：100%；
宽度：600px；
溢出：隐藏；
}
.幻灯片{
身高：100%；
}

---

注意，如果您有一张肖像画，您可以将宽度设置为100%，将溢出y设置为隐藏

即使您只想让图像填充一个div，最简单的方法就是使用背景。看看这把小提琴：或者看看我写的这个滑块：www.drewbble.com/angular slider/@drew_w谢谢……事实上，我正试图让背景幻灯片图像只填充div，而不是页面。也许这个链接可以帮助我更好地解释。。。顶部的幻灯片，我希望它填充div。如果浏览器太窄，您将在div底部看到绿色。mudcharllenger.com/a-responsiveb.html填充div和页面之间实际上没有任何区别。如果打开角度滑块并右键单击主幻灯片查看器，则可以在浏览器的检查器中更改

.slide viewer.higher

css类，使其宽度百分比小于100%，您可以看到此操作。祝你好运！只要div的纵横比不大于图像的纵横比，此解决方案就可以工作。如果发生这种情况，页面的左、右上方仍然会出现“条”。@drew_w-这正是我目前所经历的。。。Drew，在你提到的小提琴中，（我以前只使用过静态bg图像），我如何在没有“背景”的CSS第5行和第6行应用属性？第5行和第6行：背景：url（“”）中间不重复；背景尺寸：封面；假设我将其应用于：}.slideshow{height:100%；width:100%；overflow:hidden；}.slideshow img{height:100%；}@HoustonGuy我使用了您示例中的图像。只要选取图像的短边，并使用100%值将其与div的长边相匹配，示例就应该可以运行。设置溢出：隐藏将删除所有滚动条。另外，背景图像技巧也会起作用。@user1663209，谢谢。我的脑子好像被炸了。我似乎还是不能让它工作。如果我将示例中的容器增加到100%宽，则图像的两侧都会有条。我想要图像填充宽度：100%的容器/屏幕。提供的JSFIDLE是完全正确的，但是我想用幻灯片来实现这一点，但我无法理解。请开枪打我，我的小提琴链接不正确。另外，idk如果有帮助，但是在您提供的链接中，正文有一个边距：8px；。如果将边距设置为0，白色条将消失。

HTML
<div class="slideshow" style="position: relative;">
   <img src="http://mudchallenger.com/a-images/backgrounds/bg-1.png"  />
</div>

CSS
.slideshow{
  height:100%;
  width:600px;
  overflow:hidden;
}

.slideshow img{
  height:100%;
}