Skip to content

Image = max-width: 100% within .main section #64

Closed
nathanstaines opened this Issue Mar 21, 2011 · 3 comments

4 participants

@nathanstaines

Example problem: http://ws.which26.pilotdev.net/development/framework/help.html

It seems every browser behaves differently when a large image is placed in the .main section with a max-width of 100% - webkit being the only one not to mess up the layout.

I know most people would simply suggest giving the image specific dimensions or a max-width of specific pixels but I'm wanting to use this framework all the way down to mobile. Also if I was to have an image that fit nicely within a two column layout and then later decided I wanted to add a .leftCol the image does not resize accordingly.

I think the issue is that .main is set to display as a table-cell and that the image is given a max-width of 100% these rules on their own tend to work nicely but together things get messed up.

Any help would be greatly appreciated.

@gmclelland

You could try this:
Make sure your images don't have dimensions and set the max-width to 100% and the width to 100% for the images.

Hope that helps,
-Glenn

@yodasw16

I noticed this same issue. Adding width: 100% to images isn't a solution. The whole point of max-width: 100% is that if the images is bigger than it's container, it will scale to fit, never exceeding 100%. If you also apply width:100%, the image will stretch to 100% of it's containers whether it needs to or not.

Not sure what the solution is. for now, removing display: table-cell fixes it, but that isn't really a good solution either.

Anyone else have something?

@wellstudio

Along with Nathan, I've been searching for a fix for this for a while now. Setting fixed width on the .main column and changing from display:table-cell to display:block is NOT a good responsive option but seems to be the only workable solution that avoids having to put dimensions on the image.

This solution allows the images to be added without dimensions, i.e. scalable, but is then really inflexible on the templates, resulting in a lot of changes if you want to change layout at a later date, making the width fix all the way down to smaller resolutions with media queries. Very depressing.

I wouldn't know if you could use JavaScript to sniff out whether or not "max-width:100%" is supported when in a

? Anyone, seen any code that could do this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.