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

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

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: CSS, mobile computing

This entry was posted and is filed under blog meta, communication, information technology, public. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.