html - Div does't scale to child image's scaled width (Firefox issue) -
i have images in horizontally scrolling div so:
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; }
a working example: fiddle
can using firefox tell me why image wrappers not scale widths match images. works fine in safari , chrome (not tested in ie).
in firefox, if image example 500px wide scaled because of 100% height property, image wrapper width stays @ 500px.
another example, if image 2500px wide scaled down fit in, width of image wrapper stay 2500px wide resulting in big space before next image.
how can make behave same in firefox in chrome , safari?
.sg-pic_wrap{ height:98%; width:auto; white-space:nowrap; display:inline; }
change display inline.
Comments
Post a Comment