{"id":158,"date":"2013-01-18T18:01:08","date_gmt":"2013-01-18T18:01:08","guid":{"rendered":"http:\/\/boulderinformationservices.wordpress.com\/?p=158"},"modified":"2013-01-18T18:01:08","modified_gmt":"2013-01-18T18:01:08","slug":"chrome-shrinks-images-in-table-cells","status":"publish","type":"post","link":"https:\/\/boulderinformationservices.com\/blog\/chrome-shrinks-images-in-table-cells\/","title":{"rendered":"Chrome shrinks images in table cells"},"content":{"rendered":"<p>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.<\/p>\n<div id=\"attachment_161\" style=\"width: 378px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-161\" class=\"size-full wp-image-161\" alt=\"Firefox provided the desired effect\" src=\"http:\/\/boulderinformationservices.com\/blog\/wp-content\/uploads\/2013\/01\/table-images-intended-and-firefox.png\" width=\"368\" height=\"238\" srcset=\"https:\/\/boulderinformationservices.com\/blog\/wp-content\/uploads\/2013\/01\/table-images-intended-and-firefox.png 368w, https:\/\/boulderinformationservices.com\/blog\/wp-content\/uploads\/2013\/01\/table-images-intended-and-firefox-300x194.png 300w\" sizes=\"(max-width: 368px) 100vw, 368px\" \/><p id=\"caption-attachment-161\" class=\"wp-caption-text\">Firefox provides the desired effect<\/p><\/div>\n<div id=\"attachment_162\" style=\"width: 446px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-162\" class=\"size-full wp-image-162 \" alt=\"table images too small\" src=\"http:\/\/boulderinformationservices.com\/blog\/wp-content\/uploads\/2013\/01\/table-images-too-small.png\" width=\"436\" height=\"193\" srcset=\"https:\/\/boulderinformationservices.com\/blog\/wp-content\/uploads\/2013\/01\/table-images-too-small.png 436w, https:\/\/boulderinformationservices.com\/blog\/wp-content\/uploads\/2013\/01\/table-images-too-small-300x133.png 300w\" sizes=\"(max-width: 436px) 100vw, 436px\" \/><p id=\"caption-attachment-162\" class=\"wp-caption-text\">Chrome shrinks the images in the table cell down to thumbnail size<\/p><\/div>\n<p style=\"text-align:left;\">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&#8217;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.<\/p>\n<div id=\"attachment_160\" style=\"width: 483px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-160\" class=\"size-full wp-image-160\" alt=\"The culprit\" src=\"http:\/\/boulderinformationservices.com\/blog\/wp-content\/uploads\/2013\/01\/table-images-sneaky-culprit.png\" width=\"473\" height=\"409\" srcset=\"https:\/\/boulderinformationservices.com\/blog\/wp-content\/uploads\/2013\/01\/table-images-sneaky-culprit.png 473w, https:\/\/boulderinformationservices.com\/blog\/wp-content\/uploads\/2013\/01\/table-images-sneaky-culprit-300x259.png 300w\" sizes=\"(max-width: 473px) 100vw, 473px\" \/><p id=\"caption-attachment-160\" class=\"wp-caption-text\">The culprit<\/p><\/div>\n<div id=\"attachment_159\" style=\"width: 490px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-159\" class=\"size-full wp-image-159\" alt=\"The fix\" src=\"http:\/\/boulderinformationservices.com\/blog\/wp-content\/uploads\/2013\/01\/table-images-change-css.png\" width=\"480\" height=\"399\" srcset=\"https:\/\/boulderinformationservices.com\/blog\/wp-content\/uploads\/2013\/01\/table-images-change-css.png 480w, https:\/\/boulderinformationservices.com\/blog\/wp-content\/uploads\/2013\/01\/table-images-change-css-300x249.png 300w\" sizes=\"(max-width: 480px) 100vw, 480px\" \/><p id=\"caption-attachment-159\" class=\"wp-caption-text\">The fix<\/p><\/div>\n<p style=\"text-align:left;\">I understand why the WordPress theme designer wants to set a max-width on images, but for Chrome, and in table cells, it&#8217;s more trouble than it&#8217;s worth. So I created a new style declaration in my theme&#8217;s stylesheet:<\/p>\n<pre style=\"text-align:left;\">.entry-content <strong>td<\/strong> img {\n\u00a0\u00a0 \u00a0max-width: none; \n}<\/pre>\n<p style=\"text-align:left;\">\n","protected":false},"excerpt":{"rendered":"<p>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. I checked the styles for widths, table-layout, anything &hellip; <a href=\"https:\/\/boulderinformationservices.com\/blog\/chrome-shrinks-images-in-table-cells\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,18],"tags":[],"_links":{"self":[{"href":"https:\/\/boulderinformationservices.com\/blog\/wp-json\/wp\/v2\/posts\/158"}],"collection":[{"href":"https:\/\/boulderinformationservices.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/boulderinformationservices.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/boulderinformationservices.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/boulderinformationservices.com\/blog\/wp-json\/wp\/v2\/comments?post=158"}],"version-history":[{"count":0,"href":"https:\/\/boulderinformationservices.com\/blog\/wp-json\/wp\/v2\/posts\/158\/revisions"}],"wp:attachment":[{"href":"https:\/\/boulderinformationservices.com\/blog\/wp-json\/wp\/v2\/media?parent=158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/boulderinformationservices.com\/blog\/wp-json\/wp\/v2\/categories?post=158"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/boulderinformationservices.com\/blog\/wp-json\/wp\/v2\/tags?post=158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}