{"id":2518,"date":"2012-09-11T23:21:40","date_gmt":"2012-09-11T23:21:40","guid":{"rendered":"http:\/\/www.dognmonkey.com\/techs\/?p=2518"},"modified":"2012-09-11T23:22:32","modified_gmt":"2012-09-11T23:22:32","slug":"re-sized-images-fail-to-display-on-wordpress","status":"publish","type":"post","link":"https:\/\/www.dognmonkey.com\/techs\/re-sized-images-fail-to-display-on-wordpress.html","title":{"rendered":"Re-sized Images Fail To Display On WordPress"},"content":{"rendered":"<p style=\"text-align: center;\"><em><\/em><em>I change and modify themes once in a while when I found some nice lay-out themes. Some themes cause my re-sized images NOT to display as the sizes defined in the editor WYSIWYG. It&#8217;s the CSS problem.<\/em><\/p>\n<p style=\"text-align: center;\"><em><a class=\"preview\" title=\"resized look in editor\" href=\"\/media\/wpweb\/imgresize\/resizededitor.jpg\" rel=\"lightbox[resized]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"resized look in editor\" src=\"\/media\/wpweb\/imgresize\/tn_resizededitor.jpg\" alt=\"\" width=\"250\" height=\"112\" \/><\/a>\u00a0\u00a0\u00a0\u00a0 <a class=\"preview\" title=\"non-resized display\" href=\"\/media\/wpweb\/imgresize\/nonresized.jpg\" rel=\"lightbox[resized]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"non-resized display\" src=\"\/media\/wpweb\/imgresize\/tn_nonresized.jpg\" alt=\"\" width=\"243\" height=\"250\" \/><\/a><\/em><\/p>\n<p style=\"text-align: center;\"><em>Open the css file and look for &#8220;.post img&#8221;, there are 2 settings can cause this problem. If the theme is fluid on the content, which is scalable to the resolutions of reader screens (which all of our blogs are), if the &#8220;width&#8221; of the image is not defined as &#8220;max-width&#8221;, the images will scale to the width of the content or the original size which ever is smaller. The other problem is if the &#8220;width&#8221; is set to &#8220;auto&#8221;, remove it.<\/em><\/p>\n<p style=\"text-align: center;\"><em><a class=\"preview\" title=\"Make sure max-width and not width in Fluid content CSS\" href=\"\/media\/wpweb\/imgresize\/max-width.jpg\" rel=\"lightbox[resized]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"Make sure max-width and not width in Fluid content CSS\" src=\"\/media\/wpweb\/imgresize\/tn_max-width.jpg\" alt=\"\" width=\"250\" height=\"54\" \/><\/a>\u00a0\u00a0\u00a0\u00a0 <a class=\"preview\" title=\"remove width=auto\" href=\"\/media\/wpweb\/imgresize\/widthauto.jpg\" rel=\"lightbox[resized]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"remove width=auto\" src=\"\/media\/wpweb\/imgresize\/tn_widthauto.jpg\" alt=\"\" width=\"250\" height=\"42\" \/><\/a><\/em><\/p>\n<p style=\"text-align: center;\"><em>Remove &#8220;width=auto&#8221; and change &#8220;width=600px&#8221; to &#8220;max-width=600px&#8221; which ever the case may be, we solved our problem.<\/em><\/p>\n<p style=\"text-align: center;\"><em><a class=\"preview\" title=\"The page display re-sized images correctly\" href=\"\/media\/wpweb\/imgresize\/resized.jpg\" rel=\"lightbox[resized]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"The page display re-sized images correctly\" src=\"\/media\/wpweb\/imgresize\/tn_resized.jpg\" alt=\"\" width=\"250\" height=\"120\" \/><\/a><\/em><\/p>\n<p style=\"text-align: center;\"><em>If you happen to like <a title=\"mono-lab themes\" href=\"\/\/www.mono-lab.net\" target=\"_blank\">mono-lab.net <\/a>themes like me, you will have some other problem like putting 3 small iframes inline on a page. The design is to be like this.<\/em><\/p>\n<p style=\"text-align: center;\"><em><\/em><a class=\"preview\" rel=\"lightbox[resized]\" title=\"3 iframes inline on a page\" href=\"\/media\/wpweb\/imgresize\/iframes3.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"3 iframes inline on a page\" src=\"\/media\/wpweb\/imgresize\/tn_iframes3.jpg\" alt=\"\" width=\"250\" height=\"130\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><em>but the css keep display them like this<\/em><\/p>\n<p style=\"text-align: center;\"><em><\/em><a class=\"preview\" rel=\"lightbox[resized]\" title=\"display 3 blocks NOT inline\" href=\"\/media\/wpweb\/imgresize\/iframes.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"display 3 blocks NOT inline\" src=\"\/media\/wpweb\/imgresize\/tn_iframes.jpg\" alt=\"\" width=\"250\" height=\"153\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><em>I found the class that causes this problem in the CSS and I just remove it.<\/em><\/p>\n<p style=\"text-align: center;\"><em><\/em><a class=\"preview\" rel=\"lightbox[resized]\" title=\"remove the class that causes the problem\" href=\"\/media\/wpweb\/imgresize\/iframesfixed1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"remove the class that causes the problem\" src=\"\/media\/wpweb\/imgresize\/tn_iframesfixed1.jpg\" alt=\"\" width=\"250\" height=\"15\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><em>Cheers,<\/em><\/p>\n<p style=\"text-align: center;\"><ul class=\"lcp_catlist\" id=\"lcp_instance_0\"><\/ul>&#8220;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I change and modify themes once in a while when I found some nice lay-out themes. Some themes cause my re-sized images NOT to display as the sizes defined in the editor WYSIWYG. It&#8217;s the CSS problem. \u00a0\u00a0\u00a0\u00a0 Open the css file and look for &#8220;.post img&#8221;, there are 2 settings can cause this problem. <a href=\"https:\/\/www.dognmonkey.com\/techs\/re-sized-images-fail-to-display-on-wordpress.html\" class=\"more-link\">&#8230;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,20],"tags":[51,224,226,185,225],"class_list":["post-2518","post","type-post","status-publish","format-standard","hentry","category-themes","category-wordpress","tag-css","tag-image-resized","tag-max-width","tag-themes-2","tag-width"],"views":978,"_links":{"self":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts\/2518","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/comments?post=2518"}],"version-history":[{"count":4,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts\/2518\/revisions"}],"predecessor-version":[{"id":2522,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts\/2518\/revisions\/2522"}],"wp:attachment":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/media?parent=2518"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/categories?post=2518"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/tags?post=2518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}