In the simplified demo, there's a pair of images and a pair of span tags with a blue background. Both can be removed from the equation for the time being, in the interest of reducing the code to the simplest state in which the underlying problem can still be reproduced. It also has nothing to do with aligning the content (although that's presumably the motivation for using display: table-cell). It has nothing to do with the container being resizable. Table cells behave differently in this case than an element with display: block. It's caused by using display: table-cell in combination with max-width: 100% and max-height: 100%. The problem occurs in IE, Firefox, and Opera. I know it's possible to scale the image dynamically in javascript, but I don't see the need for extra javascript, when Internet Explorer should be able to handle the scaling correctly. I can get IE to scale the width, similar to Chrome/Safari, but it requires the DIV height (yes, height) to be set to something low, like 10px, which is kindda weird imo. ![]() The width will not go below 100%, which is the main issue. Internet Explorer 10 however, only scales the height. Try resizing the box to less than 100% width and height in Chrome and you will get something similar to these images: I've set up a quick jsfiddle to illustrate the issue. Chrome and Safari does this perfectly - Internet Explorer 10 doesn't. The image must also be centered, both horizontally and vertically. The image must retain its proportions and never go beyond 100% (both width and height) - even if the containing DIV is larger than the image. I'm trying fit a fluid image inside a resizable DIV.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |