i tried pretty hard find answer on here, on google, , elsewhere, seems pretty obscure. had fancy css in order create box specific aspect ratio inside thumbnail centered vertically , horizontally. straight-forward ideas complicated implement in css. solution works great everywhere except inside table in chrome image has dimensions larger container.
here code demonstrates issue:
/* sets aspect ratio of container adding padding calculated according width of parent element */ .aspect-ratio { width: 100%; display: inline-block; position: relative; } .aspect-ratio:after { padding-top: 76.19%; display: block; content: ''; } /* parent has no height, fills container's space */ .fill-container { position: absolute; top: 0; bottom: 0; right: 0; left: 0; font-size: 0; } /* centers image horizontally , vertically background color */ .image-background { text-align: center; background-color: #444; height: 100%; width: 100%; } .image-background::before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; } img { display: inline-block; padding: 5px; box-sizing: border-box; vertical-align: middle; } /* firefox: image height fills parent element chrome: inside table - image rendered @ natural height outside table - image height fills parent element expected */ .fill-height { height: 100%; } .fill-width { width: 100%; } /* other styles */ h1, h2, h3 { text-align: center; } table { width: 100%; } .thumbnail-viewer { width: 40%; margin: 10px auto; }<h1>tall image</h1> <h2>small</h2> <h3>table</h3> <table> <tbody> <tr> <td> <div class="thumbnail-viewer"> <div class="aspect-ratio"> <div class="fill-container"> <div class="image-background"> <img class="fill-height" src="http://www.irmaagro.com/images/d.jpg" style="height: 100%;"> </div> </div> </div> </div> </td> </tr> </tbody> </table> <h3>no table</h3> <div class="thumbnail-viewer"> <div class="aspect-ratio"> <div class="fill-container"> <div class="image-background"> <img class="fill-height" src="http://www.irmaagro.com/images/d.jpg" style="height: 100%;"> </div> </div> </div> </div> <h2>large</h2> <h3>table (works in firefox , ie, breaks in chrome , safari)</h3> <table> <tbody> <tr> <td> <div class="thumbnail-viewer"> <div class="aspect-ratio"> <div class="fill-container"> <div class="image-background"> <img class="fill-height" src="http://www.landscapeontario.com/thumbnailer.php?image=/assets/1320240573.twine_wrap_2.jpg&imgwh=500" style="height: 100%;"> </div> </div> </div> </div> </td> </tr> </tbody> </table> <h3>no table</h3> <div class="thumbnail-viewer"> <div class="aspect-ratio"> <div class="fill-container"> <div class="image-background"> <img class="fill-height" src="http://www.landscapeontario.com/thumbnailer.php?image=/assets/1320240573.twine_wrap_2.jpg&imgwh=500" style="height: 100%;"> </div> </div> </div> </div> <h1>wide image</h1> <h2>small</h2> <h3>table</h3> <table> <tbody> <tr> <td> <div class="thumbnail-viewer"> <div class="aspect-ratio"> <div class="fill-container"> <div class="image-background"> <img class="fill-width" src="http://www.beach.com/images/activity-photo-county-londonderry-ireland-3-day-lake-district-and-hadrian-s-wall-small-group-tour-from-edinburgh-1.jpg"> </div> </div> </div> </div> </td> </tr> </tbody> </table> <h3>no table</h3> <div class="thumbnail-viewer"> <div class="aspect-ratio"> <div class="fill-container"> <div class="image-background"> <img class="fill-width" src="http://www.beach.com/images/activity-photo-county-londonderry-ireland-3-day-lake-district-and-hadrian-s-wall-small-group-tour-from-edinburgh-1.jpg"> </div> </div> </div> </div> <h2>large</h2> <h3>table</h3> <table> <tbody> <tr> <td> <div class="thumbnail-viewer"> <div class="aspect-ratio"> <div class="fill-container"> <div class="image-background"> <img class="fill-width" src="http://www.craterlaketrust.org/pub/photo/thumb/crater-summer_cropto_500x200.jpg"> </div> </div> </div> </div> </td> </tr> </tbody> </table> <h3>no table</h3> <div class="thumbnail-viewer"> <div class="aspect-ratio"> <div class="fill-container"> <div class="image-background"> <img class="fill-width" src="http://www.craterlaketrust.org/pub/photo/thumb/crater-summer_cropto_500x200.jpg"> </div> </div> </div> </div>hopefully can see, in chrome (i'm using 43.0.2357.132 64-bit) , safari (8.0.7) tall/large image exceeding boundaries of parent , height being set natural height of image. wide images work expected, appears issue of height.
my question: simple or straight-forward way fix issue in chrome , safari? or bug , should less-than-ideal work-around makes less terrible? causing issue?
thanks!
fyi, on smaller screens (screenwidth < 650px), first image inside table breaks well.
to fix it, change img use absolute positioning centering trick:
img { padding: 5px; box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } this means don't need image-background::before declaration.
Comments
Post a Comment