{"id":11627,"date":"2021-01-15T03:39:34","date_gmt":"2021-01-15T11:39:34","guid":{"rendered":"https:\/\/www.oeconomist.com\/blogs\/daniel\/?p=11627"},"modified":"2021-01-15T03:48:19","modified_gmt":"2021-01-15T11:48:19","slug":"adapting-images-to-small-displays","status":"publish","type":"post","link":"https:\/\/www.oeconomist.com\/blogs\/daniel\/?p=11627","title":{"rendered":"Adapting Images to Small Displays"},"content":{"rendered":"<p>This &#39;blog has yet to fully accommodate <q>mobile<\/q> computing.  Images in entries have usually had an absolute width of 450 pixels, which made sense when displays were 640 pixels or more wide (and seldom more than 1920 pixels wide), but is now too wide for some devices.<\/p> <p>I've been occasionally patching old entries to fix this problem.  With <code style=\"font-size: smaller ;\">IMG<\/code> and <code style=\"font-size: smaller ;\">IFRAME<\/code> elements, the trick is to add<\/p> <div style=\"text-align: center ;\"><code>max-width: 100% ; max-height:<\/code> <var>R<\/var><code>vw ;<\/code><\/div> <p>to the string-value of the <code>style<\/code> attribute, where <var>R<\/var> is the ratio of the height divided by the width, multiplied by 100.  For example, if the image is 450 pixels wide and 900 pixels tall, then<\/p> <div style=\"text-align: center ;\"><var>R<\/var> = 100 &middot; (900 \/ 450) = 200<\/div> <p>Just what happens when <var>R<\/var> is not an integer seems to be browser-dependent.<\/p> <p>An example of an <code style=\"font-size: smaller ;\">IMG<\/code> element could be<\/p> <blockquote style=\"text-align: left ; word-break: break-all ;\"><code>&lt;img src=\"wp-content\/uploads\/2020\/11\/A6_corrected.png\" alt=\"[image of formula]\" width=\"449\" height=\"92\" style=\"display: block ; margin-left: auto ; margin-right: auto ; margin-top: 1em ; margin-bottom: 1em ; border: none ; width: 26.4em ; height: 5.4em ; <span style=\"text-decoration: underline;\">max-width: 100% ; max-height: 20.5vw ;<\/span>\" \/&gt;<\/code><\/blockquote> <p>When <a href=\"https:\/\/www.bitchute.com\/\">BitChute<\/a> gives code to embed a video, it looks something like this:<\/p> <blockquote style=\"text-align: left ; word-break: break-all ;\"><code>&lt;iframe width=\"640\" height=\"360\" scrolling=\"no\" frameborder=\"0\" style=\"border: none;\" src=\"https:\/\/www.bitchute.com\/embed\/QKOTRHgzsuQE\/\"&gt;&lt;\/iframe&gt;<\/code><\/blockquote> <p>It <em>should<\/em> look something like this:<\/p> <blockquote style=\"text-align: left ; word-break: break-all ;\"><code>&lt;iframe width=\"640\" height=\"360\" scrolling=\"no\" frameborder=\"0\" style=\"border: none ; <span style=\"text-decoration: underline;\">max-width: 100% ; max-height: 56.25vw ;<\/span>\" src=\"https:\/\/www.bitchute.com\/embed\/QKOTRHgzsuQE\/\"&gt;&lt;\/iframe&gt;<\/code><\/blockquote> ","protected":false},"excerpt":{"rendered":"This &#39;blog has yet to fully accommodate mobile computing. Images in entries have usually had an absolute width of 450 pixels, which made sense when displays were 640 pixels or more wide (and seldom more than 1920 pixels wide), but is now too wide for some devices. I've been occasionally patching old entries to fix [&hellip;]","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[7,117,69,4],"tags":[1260,1573],"class_list":["post-11627","post","type-post","status-publish","format-standard","hentry","category-blog-meta","category-communication","category-information-technology","category-public","tag-css","tag-mobile-computing"],"_links":{"self":[{"href":"https:\/\/www.oeconomist.com\/blogs\/daniel\/index.php?rest_route=\/wp\/v2\/posts\/11627","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.oeconomist.com\/blogs\/daniel\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.oeconomist.com\/blogs\/daniel\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.oeconomist.com\/blogs\/daniel\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.oeconomist.com\/blogs\/daniel\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11627"}],"version-history":[{"count":7,"href":"https:\/\/www.oeconomist.com\/blogs\/daniel\/index.php?rest_route=\/wp\/v2\/posts\/11627\/revisions"}],"predecessor-version":[{"id":11634,"href":"https:\/\/www.oeconomist.com\/blogs\/daniel\/index.php?rest_route=\/wp\/v2\/posts\/11627\/revisions\/11634"}],"wp:attachment":[{"href":"https:\/\/www.oeconomist.com\/blogs\/daniel\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11627"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.oeconomist.com\/blogs\/daniel\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=11627"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.oeconomist.com\/blogs\/daniel\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=11627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}