幻灯片显示填充Div

Question

昨晚我发布了这个问题，但是已经完全改写了，因为我认为这让人很困惑，而且我也提供了一个例子来说明我的问题....

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

我希望幻灯片按比例缩放以适应并覆盖整个div，即使从侧面进行裁剪也是必要的。这对我要问的是否有意义？

以下是示例：如果您现在从宽屏或全屏浏览器窗口访问它，图像可能会填满整个div。 但是如果你缩小窗口并刷新，你会看到div底部的bg颜色。示例：http://mudchallenger.com/a-responsivef.html

如何让幻灯片显示以填充div？

谢谢！

**我还应该补充一下，我并不是想把这个填充屏幕作为背景。我只是想让它填补div。

Answer 1

您需要将图像的高度设置为100％并让宽度自动。这是因为图像是横向的。然后，确保div.slideshow的溢出（可能只是overflow-x）属性设置为隐藏。这将允许图像缩放到div（帧）而不是自身。以下是一个示例：http://jsfiddle.net/krh121791/rXep9/。

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%;
}

注意，如果您有肖像照片，则将宽度设置为100％并将overflow-y设置为隐藏。