Using JavaScript To Resize Objects

This example uses JavaScript to change the size of a container by repositioning the lower right corner.


<head>
…
<script async="async" src="https://rbutterworth.nfshost.com/.JS/RB.resize.js"></script>
<script>
  window.addEventListener("load", function() {
    RB.resize(document.getElementById("fig1"), true)
    RB.resize(document.getElementById("fig2"))
    RB.resize(document.getElementById("fig3"))
  })
</script>
…
</head>

Horizontal and vertical adjustment is enabled in the first figure. Vertical adjustment is disabled in the next two; control the right edge and the height will scale automatically.

Double-click to restore an object to its original size.

Caveat: if the container has style="width=..." or style="height=..." inline HTML attributes, they will be modified.

Using JavaScript To Resize Objects

Figure 1: Inline SVG image

Figure 2: Paragraph text

Figure 3: JPEG image