在没有JavaScript的情况下，将灵活容器设置为图像的宽度和高度

Question

我有一个流畅的布局，内容由一个来自www.smoothdivscroll.com的jQuery驱动的滚动条组成（类似于http://www.smoothdivscroll.com/basicDemo.htm的基本示例）。

滚动条中的每个框都包含图像和文本。客户希望每个图像尽可能多地填充滚动区域的高度，并且每个图像将具有不同的大小。因此，每个图像的宽度是灵活的。整个卷轴的宽度也很灵活。

在下面的例子中，我无法理解为什么在图像非常大的情况下，盒子的大小被推出比图像大得多（它们必须在更大的位置上缩放）浏览器窗口）。实际图像尺寸如下所示。左边的那个正在升级，而左边的那个正在缩小尺寸。

我正在使用的CSS在这里：http://pastebin.com/uYT5ffR8

如果我为每个灰色框移除容器的高度，那么......

.smoothscroll .scroll-content-item { 
position: relative; float:left; margin:0 10px; padding:0; background:grey }

...额外宽度消失但当然内部图像无法正确渲染高度：100％属性（见下文）。

我真的很难过如何使用CSS实现每个盒子所需的布局。

每次调整浏览器大小时，是否需要通过JavaScript动态设置每个图像的宽度？

Answer 1

1. 将图像设置为DIV背景，并将该div的高度和宽度设置为100％。图片将仅限于原始尺寸。

2. 使用overflow:hidden创建div并放置图像。它将尽可能地被视为该div，您将能够为该图像设置任何一个。