JavaScript: make image zoom always full width

css/components/elements/_media.scss

@@ -66,6 +66,7 @@ img.mag_popup {
 }
 
 .mag_popup_container {
+  background: var(--content-background);
   width:100%;
   position:absolute;
   z-index:1001;

js/pretext_add_on.js

@@ -122,15 +122,33 @@ window.addEventListener("load",function(event) {
     /* click an image to magnify */
     $('body').on('click','.image-box > img:not(.draw_on_me):not(.mag_popup), .sbspanel > img:not(.draw_on_me):not(.mag_popup), figure > img:not(.draw_on_me):not(.mag_popup), figure > div > img:not(.draw_on_me):not(.mag_popup)', function(){
         var img_big = document.createElement('div');
-        img_big.setAttribute('style', 'background:#fff;');
+        const content_element = document.getElementById('ptx-content');
         img_big.setAttribute('class', 'mag_popup_container');
-        img_big.innerHTML = '<img src="' + $(this).attr("src") + '" style="width:100%" class="mag_popup"/>';
+        img_big.innerHTML = `<img src="${$(this).attr("src")}" style="width:100%;" class="mag_popup"/>`;
  // place_to_put_big_img = $(this).parents(".sbsrow, figure, li").last();
         place_to_put_big_img = $(this).parents(".image-box, .sbsrow, figure, li, .cols2 article:nth-of-type(2n)").last();
   // for .cols2, the even ones have to go inside the previous odd one
         if (place_to_put_big_img.prop("tagName") == "ARTICLE") {
            place_to_put_big_img = place_to_put_big_img.prev().children().first();
         }
+
+        // find ancestor so that place_to_put_big_img's position is relative to that ancestor
+        var img_big_parent = place_to_put_big_img[0].parentElement;
+        while (img_big_parent.id !== "ptx-content") {
+           const computed_position = getComputedStyle(img_big_parent).position;
+           if (computed_position !== "static") {
+              break;
+           }
+           img_big_parent = img_big_parent.parentElement;
+        }
+
+        const content_element_computed_style = getComputedStyle(content_element);
+        const content_padding_left  = parseFloat(content_element_computed_style.paddingLeft );
+        const content_padding_right = parseFloat(content_element_computed_style.paddingRight);
+        const img_big_offset = content_element.getBoundingClientRect().left - img_big_parent.getBoundingClientRect().left + content_padding_left;
+        const doc_width = content_element.offsetWidth - content_padding_left - content_padding_right;
+        img_big.setAttribute('style', `width:${doc_width.toString()}px; left:${img_big_offset.toString()}px;`);
+
         $(img_big).insertBefore(place_to_put_big_img);
     });