Chrome shrinks images in table cells! That was my accusation while working on a WordPress site. The images were correct in Firefox, but in Chrome, they got shrunk down to thumbnail size.
Firefox provides the desired effect
Chrome shrinks the images in the table cell down to thumbnail size
I checked the styles for widths, table-layout, anything that might let Chrome think it was okay to shrink the image. After much research I found the culprit. It’s max-width:100%. Apparently Chrome interprets the rule differently from Firefox. It assumes the image can freely be shrunk, and with a long string of text in the cell next door, it squeezes the images.
The culprit
The fix
I understand why the WordPress theme designer wants to set a max-width on images, but for Chrome, and in table cells, it’s more trouble than it’s worth. So I created a new style declaration in my theme’s stylesheet:
.entry-content td img {
max-width: none;
}
You are awesome for posting this fix. Browser differences drives me crazy. I am using TablePress which is a wonderful plugin and my images were showing up really small in Chrome, but fine in Firefox and IE. Thanks for sharing your knowledge.
Thanks for the article – I’ve been having the same problem. There’s a simpler fix if you don’t want to muck about with the CSS file. Set the width to the desired width of the image. For example – this seems to sort it out in Chrome (and Safari, which also has the shrinking image problem) and still works in Firefox.
In the above comment I meant to say set the Table division width to the desired width of the image – sorry, I tried to be clever and used td in angle brackets – doh!
Thank you! I ran into this problem with Chrome as well. I use Firefox, but I had to fix the site for those that use Chrome.
You just saved me several hours of frustration. Thanks!
Thank you so much for this information ,
I had the same problem ,in Joomla 3.1 site . changed the “image max-width: none; ” in the Styles.css and everything worked fine.
I guess giving a % with to the other cell will be better, it will also fix this bug, and your max-width value still works 🙂
This solves the image size problem for me but it makes the overall width of the table too large. Is anyone else having this problem?
THANK YOU SOOOOOO MUCH! This had been bugging me for weeks!
I note that Bootstrap also add max-width: 100% to every image to make them responsive. I lost 2 hours for searching for solution, thanks 🙂
Thanks for writing this up. Came in handy this morning on our portal.
One word, awesome
Pingback: Disappearing images or avatars in tables in chrome? | WP Users Plugin
THank you for this fix ! I spent a whole afternoon trying to understand why was it happening.
You save my day !
Thank you so much for your post!
Very useful! Thank you so much!
Thank you for posting this! I have the same exact problem.
Please let me congratulate you on your awesomeness. That at long last solved it for me!
Great answer. Hopefully others will arrive at this page and get this answer before wasting too much time on other attempts. Thanks!!
fantastic! thank you!!!!
Thanks! Fixed the same problem with Joomla
thank you, thank you !!!!
brilliant, thank you!
Thanks for that! It solved my problem.
Fixed my problem – thank you
Awesome! Thanks for saving me time – I appreciate you sharing this.
thank a lot 🙂
The same problem with Drupal 7. Thank you!
Realize this is an old post, but want to express my thanks as well!
Thank you so much! This was happening in FireFox for me, and your simple fix worked perfectly.
Fixed the issue! Many thanks.