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中，如果图像最初为500px宽，但由于100％高度属性而放大，则图像包装宽度保持在500px。

另一个例子，如果一个图像最初是2500px宽，但按比例缩小以适应，图像包装器的宽度将保持2500px宽，从而在下一个图像之前留出很大的空间。

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

Answer 1

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

将显示更改为内联。

Div不会缩放到子图像的缩放宽度（Firefox问题）

1 个答案: