Better image floating

static/css/custom.css

@@ -6,13 +6,31 @@ html, body.crt {
   max-width: 100vw;
 }
 
+p {
+  position: relative;
+}
+
+p.img-container {
+  border: honeydew;
+  border-style: solid;
+}
+
 p > img {
-  max-width: 100%;
+  max-width: 90%;
+  max-height: 90%;
+  display: block;
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 1%;
 }
 
-p > img + btn {
-  float: right;
-  transform: translateY(-100%);
+p > img+button, p > img+.btn-primary.btn-lg:not(:disabled):not(.disabled):active {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  top: auto;
+  left: auto;
 }
 
 .expand-img {

static/js/custom.js

@@ -1,14 +1,17 @@
 function onReady() {
-    $(`p>img`)
+    var imgs = $(`p>img`)
+    imgs
     .after(appendExpandButton)
     .next()
     .on('click', onExpandButton);
 
+    imgs.parent().addClass(`img-container`);
+
     $(`#expand-img button`).on(`click`, onHideImgExpand);
 }
 
 function appendExpandButton(img) {
-    return `<btn class='btn btn-primary' data-img="${this.src}">+<btn>`
+    return `<button class='btn btn-primary btn-lg' data-img="${this.src}">+</button>`
 }
 
 function onExpandButton(e) {