diff --git a/assets/css/common/footer.css b/assets/css/common/footer.css
index cf02c16..bfb4515 100644
--- a/assets/css/common/footer.css
+++ b/assets/css/common/footer.css
@@ -66,3 +66,11 @@
 #instantclick-bar {
     background: var(--tertiary-bg);
 }
+
+/* make zoom overlay and image higher than toc */
+.medium-zoom-overlay {
+    z-index: 2;
+}
+.medium-zoom-image--opened {
+    z-index: 3;
+}
diff --git a/assets/css/common/post-single.css b/assets/css/common/post-single.css
index 5d539ec..3857fec 100644
--- a/assets/css/common/post-single.css
+++ b/assets/css/common/post-single.css
@@ -273,7 +273,7 @@ h6:hover .anchor {
 
 .post-content img {
     border-radius: 4px;
-    margin: 1rem 0;
+    margin: 1rem auto;
 }
 
 .post-content img[src*="#center"] {
@@ -520,3 +520,8 @@ h6:hover .anchor {
     padding: 1.5em;
     box-shadow: var(--shadow-elevation-low);
 }
+
+.image-size-control > img {
+    width: inherit;
+    height: inherit;
+}
diff --git a/layouts/shortcodes/image-size-control.html b/layouts/shortcodes/image-size-control.html
new file mode 100644
index 0000000..310f436
--- /dev/null
+++ b/layouts/shortcodes/image-size-control.html
@@ -0,0 +1,6 @@
+<div class="image-size-control" style="
+{{- with (.Get "width") }}width: {{ . }};{{ end -}}
+{{- with (.Get "height") }}height: {{ . }};{{ end -}}
+">
+  {{ .Inner | markdownify }}
+</div>