Chrome shrinks images in table cells

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 provided the desired effect

Firefox provides the desired effect

table images too small

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 culprit

The fix

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; 
}

Advertisements
This entry was posted in CSS, WordPress. Bookmark the permalink.

27 Responses to Chrome shrinks images in table cells

  1. 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.

  2. 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.

  3. 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!

  4. 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.

  5. az says:

    You just saved me several hours of frustration. Thanks!

  6. 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.

  7. Svv says:

    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 🙂

  8. Tom Lane says:

    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?

  9. Jessica says:

    THANK YOU SOOOOOO MUCH! This had been bugging me for weeks!

  10. kmike says:

    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 🙂

  11. Thomas says:

    One word, awesome

  12. akinori says:

    THank you for this fix ! I spent a whole afternoon trying to understand why was it happening.
    You save my day !

  13. Roman says:

    Thank you so much for your post!

  14. Víc says:

    Very useful! Thank you so much!

  15. Thank you for posting this! I have the same exact problem.

  16. Jonas says:

    Please let me congratulate you on your awesomeness. That at long last solved it for me!

  17. Massimo says:

    fantastic! thank you!!!!

  18. Joe Tomlinson says:

    Thanks! Fixed the same problem with Joomla

  19. Karen Karten says:

    thank you, thank you !!!!

  20. minagraphy says:

    brilliant, thank you!

  21. Haim says:

    Thanks for that! It solved my problem.

  22. jsherman says:

    Fixed my problem – thank you

  23. Tanya says:

    Awesome! Thanks for saving me time – I appreciate you sharing this.

  24. Dimitar says:

    The same problem with Drupal 7. Thank you!

  25. Blake says:

    Realize this is an old post, but want to express my thanks as well!

  26. lklawless says:

    Thank you so much! This was happening in FireFox for me, and your simple fix worked perfectly.

  27. CR says:

    Fixed the issue! Many thanks.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s