html - Div 不缩放到子图像的缩放宽度(Firefox 问题)

Question

我在水平滚动的 Div 中有一些图像，如下所示:

HTML

<div id="sg-container" >
    <div id="sg-scroll">
        <div class="sg-pic_wrap"><img src="#" class="sg-pic"></div>
        <div class="sg-pic_wrap"><img src="#" class="sg-pic"></div>
        <div class="sg-pic_wrap"><img src="#" class="sg-pic"></div>
        <div class="sg-pic_wrap"><img src="#" class="sg-pic" ></div>
        <div class="sg-pic_wrap"><img src="#" class="sg-pic"></div>
        <div class="sg-pic_wrap"><img src="#" class="sg-pic"></div>                
   </div>
</div>

CSS

#sg-container{
   margin:0px;
   width:100%;
   left:0;
   top:0;
   bottom:50px;
   position:fixed;
   overflow-x:auto;
   overflow-y:hidden;
}

#sg-scroll{
   height:100%;
   width:100%; 
   overflow:auto;
   white-space:nowrap;
   font-size:0;
}

.sg-pic_wrap{
   height:98%;
   width:auto;
   white-space:nowrap;
   display:inline-block;
}

.sg-pic{
   height:100%;
   width:auto;
}

一个工作示例:fiddle

任何使用 Firefox 的人都可以告诉我为什么图像包装器不缩放它们的宽度以匹配图像。它目前在 Safari 和 Chrome 中运行良好(未在 IE 中测试)。

在 Firefox 中，例如，如果图像最初是 500 像素宽但由于 100% 高度属性而被放大，则图像包装器宽度保持在 500 像素。

另一个示例，如果图像最初为 2500 像素宽但按比例缩小以适合，则图像包装器的宽度将保持 2500 像素宽，从而导致在下一张图像之前有很大的空间。

如何让它在 Firefox 中的行为与在 Chrome 和 Safari 中的行为相同？

Answer 1

.sg-pic_wrap{
   height:98%;
   width:auto;
   white-space:nowrap;
   display:inline;
}

将显示更改为内嵌。