Question

我试图建立一个水平滚动图片库，它有一个固定的高度（例如200像素）和一堆图像（长宽比保持不变，缩小到200px高度）并排放置在画廊。如果图像超出浏览器宽度，则会提供图库的水平滚动条。

我在使用Firefox时遇到问题。在Firefox中，包含图像的div将表现为其子图像不会缩小，从而在图像之间留下大量空白区域。该图库在Chrome和Safari中正常运行。

我made a jsfiddle尝试以尽可能小的方式复制问题 - 在Firefox和其他浏览器中观察它。

.container {
    height: 200px; /* Want a fixed height for container. */
    white-space: nowrap; /* Want elements to display side-by-side, for horizontal scrolling. */
    overflow: auto; /* Want scrollbars on .container. */
}

.container > .element {
    display: inline-block;
    height: 100%;
}

.element > img {
    height: 100%;
}

我做错了吗？有没有办法让.element缩小以适应缩小的图像内容？

请注意，除了图像之外，我还想在图像上叠加文字（不会反映在jsfiddle中），这就是为什么我选择将图像封装在.element div中（这样我就可以给它定位：相对然后添加一个绝对定位的子叠加层），然后选择给它显示内联块（这样我就可以将子叠加层对齐到.element的底部）。

Answer 1

您看到https://bugzilla.mozilla.org/show_bug.cgi?id=829958

好消息是Firefox 25修复了这个问题。坏消息是Firefox 25直到10月28日才发货。

作为现在的解决方法，给.container > .element一个固定的高度而不是一个百分比的高度可以工作...或者交替给.container一个具有溢出样式的父级。解决这个bug的关键部分是在可见溢出的东西上固定高度。

Firefox：div不会调整宽度以适合缩小的子图像

1 个答案: