{"id":762,"date":"2014-01-31T15:50:37","date_gmt":"2014-01-31T21:50:37","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=762"},"modified":"2014-01-31T15:50:37","modified_gmt":"2014-01-31T21:50:37","slug":"sizing-images-responsively","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/sizing-images-responsively\/","title":{"rendered":"Sizing Images Responsively"},"content":{"rendered":"<p>Images are sort of a special beast in the HTML animal kingdom. They&#8217;re technically inline elements, but they don&#8217;t really behave like them. For example, inline elements can&#8217;t have widths and heights applied. And yet, you and I both know that images <em>have<\/em> widths and heights. <\/p>\n<p>This can cause trouble in responsive web designs. While inline elements automatically play nicely in RWD, resizing to fill their container, images do not. They&#8217;ll bust right out of that shiz and wreak all sorts of havoc, turning your nice narrow sidebar into something like this:<\/p>\n<p data-height=\"268\" data-theme-id=\"4095\" data-slug-hash=\"a6af1da422439559a91f61c9024ed524\" data-default-tab=\"result\" class='codepen'>See the Pen <a href='http:\/\/codepen.io\/rglazebrook\/pen\/a6af1da422439559a91f61c9024ed524'>Sizing Images Responsively 1<\/a> by Rob Glazebrook (<a href='http:\/\/codepen.io\/rglazebrook'>@rglazebrook<\/a>) on <a href='http:\/\/codepen.io'>CodePen<\/a>.<\/p>\n<p><script async src=\"\/\/codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>That is likely not what you intended. Happily, the fix is simple, safe, and effective. <!--more--><\/p>\n<pre lang=\"css\">\nimg {\n  width: auto;\n  max-width: 100%;\n  height: auto;\n}\n<\/pre>\n<p>That&#8217;s all it takes to make our images behave:<\/p>\n<p data-height=\"268\" data-theme-id=\"4095\" data-slug-hash=\"4aa6ec8a8f8f7e24224eef0ed3bbd253\" data-default-tab=\"result\" class='codepen'>See the Pen <a href='http:\/\/codepen.io\/rglazebrook\/pen\/4aa6ec8a8f8f7e24224eef0ed3bbd253'>Sizing Images Responsively 2<\/a> by Rob Glazebrook (<a href='http:\/\/codepen.io\/rglazebrook'>@rglazebrook<\/a>) on <a href='http:\/\/codepen.io'>CodePen<\/a>.<\/p>\n<p>Here, max-width: 100% is ensuring that we never escape the bounds of our container, while height:auto resizes the height to proportionally match whatever width max-width gives us.<\/p>\n<p>The width: auto bit may seem unnecessary, and for modern browsers, it is. It&#8217;s there as a fix for IE8 and below (go figure). Without it, IE can stretch your images. The problem comes in when an image has width and height attributes set, like this:<\/p>\n<pre lang=\"html5\">\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/placehold.it\/400x400\" width=\"400\" height=\"400\">\n<\/pre>\n<p>A lot of CMSs do that by default, to ensure the proper space is left for the image when the document is rendered before the image has downloaded. It seems that, without the width: auto bit, IE will resize the width, but leave the height as it was specified in the height attribute, causing your images to look like this:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2014\/01\/cssnewbie-responsive-image-ie8-bug.png\" alt=\"An image being stretched horizontally by Internet Explorer 8.\" width=\"237\" height=\"540\" class=\"alignnone size-full wp-image-766\" \/><\/p>\n<p>Not. What. We. Wanted.<\/p>\n<p>So to prevent that, keep that width: auto in there. It feels redundant to me, but it&#8217;s better than the alternative. <\/p>\n<div class=\"wp-socializer wpsr-share-icons \" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\" ><h3>Share and Enjoy !<\/h3><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-32px\" style=\"color:#000\"><span class=\"scount\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,linkedin,pinterest,print,pdf\">0<\/span><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-32px sr-circle sr-opacity sr-pad sr-count-1 sr-count-1\"><span class=\"sr-facebook\"><a rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\"  title=\"Share this on Facebook\"  style=\"color: #ffffff\" ><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\"  title=\"Tweet this !\"  style=\"color: #ffffff\" ><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-linkedin\"><a rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\" target=\"_blank\"  title=\"Add this to LinkedIn\"  style=\"color: #ffffff\" ><i class=\"fab fa-linkedin-in\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\"  title=\"Submit this to Pinterest\"  style=\"color: #ffffff\" data-pin-custom=\"true\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-print\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Print this article \"  style=\"color: #ffffff\" ><i class=\"fa fa-print\"><\/i><\/a><\/span>\n<span class=\"sr-pdf\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Convert to PDF\"  style=\"color: #ffffff\" ><i class=\"fa fa-file-pdf\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Images are sort of a special beast in the HTML animal kingdom. They&#8217;re technically inline elements, but they don&#8217;t really behave like them. This can cause trouble in responsive web designs. Happily, the fix is simple, safe, and effective. [&#8230;]<\/p>\n<p><a class=\"more-link article\" href=\"https:\/\/cssdeck.com\/blog\/sizing-images-responsively\/\" title=\"Click to read 'Sizing Images Responsively'\">Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[183,194],"tags":[212,79,283,284,156],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/762"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=762"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/762\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=762"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=762"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=762"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}