css - Aligning vertically absolute element larger than container in Firefox -
i got problem search-fu not enough. made gallery carousel fixed height , width image list inside (displaying 1 li @ time). images positioned absolute (with margin:auto
etc) inside relative li
element.
images larger container has overflow:hidden
. images have max-width:100%
creates desired effect smaller images centered within container , larger (higher) cropped can opened full version.
.gallery-items>li { padding:0; margin:0; width:100%; height:100%; text-align:center; position:relative; overflow:hidden; } .gallery-items>li img { top:0; bottom:0; left:0; right:0; margin:auto; max-width:100%; max-height:none; height:auto; width:auto; position:absolute; }
fiddle here http://jsfiddle.net/fw63c/1/
it works great (center of image in center of container) in ie8, ie9, opera 12/15, chrome in firefox larger images start beginning of container (like have top:0
. have idea how make work in ff (preferably using css) . in advance solution, fafel
best way if don't have support ie8 or older translate image vertically. method works in major browsers, including ie9+:
img { top: 50%; transform: translatey(-50%); }
Comments
Post a Comment