Adapting Images to Small Displays

15 January 2021

This '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 this problem. With IMG and IFRAME elements, the trick is to add

max-width: 100% ; max-height: Rvw ;

to the string-value of the style attribute, where R 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

R = 100 · (900 / 450) = 200

Just what happens when R is not an integer seems to be browser-dependent.

An example of an IMG element could be

<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 ; max-width: 100% ; max-height: 20.5vw ;" />

When BitChute gives code to embed a video, it looks something like this:

<iframe width="640" height="360" scrolling="no" frameborder="0" style="border: none;" src="https://www.bitchute.com/embed/QKOTRHgzsuQE/"></iframe>

It should look something like this:

<iframe width="640" height="360" scrolling="no" frameborder="0" style="border: none ; max-width: 100% ; max-height: 56.25vw ;" src="https://www.bitchute.com/embed/QKOTRHgzsuQE/"></iframe>

Tags: ,

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.