main.less

body.image-resizer {

  --line-width: 40rem;
  --max-width: 88%;

  --content-margin: auto;
	--content-margin-start: max(
		calc(50% - var(--line-width)/2),
		calc(50% - var(--max-width)/2) );
	--content-line-width: min(var(--line-width), var(--max-width));

  /* Set overall context to 100% width */
  .markdown-preview-view .markdown-preview-sizer.markdown-preview-sizer {
    max-width: 100%;
    margin-inline: auto;
    width: 100%;
  }

  .markdown-source-view.mod-cm6.is-readable-line-width .cm-content,
  .markdown-source-view.mod-cm6.is-readable-line-width .cm-sizer {
    max-width: 100%;
    width: 100%;
  }

    /* Set inner content to line width */
  .markdown-preview-view.is-readable-line-width .markdown-preview-sizer > div,
  .markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content > div,
  .markdown-source-view.mod-cm6.is-readable-line-width .cm-sizer > .inline-title,
  .markdown-source-view.mod-cm6.is-readable-line-width .cm-sizer > .embedded-backlinks,
  .markdown-source-view.mod-cm6.is-readable-line-width .cm-sizer > .metadata-container  {
    max-width: var(--max-width);
    width: var(--line-width);
    margin-inline: var(--content-margin) !important;
  }
  .markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content {
    >  *:not(div) {
      max-width: var(--content-line-width);
      margin-inline-start: var(--content-margin-start) !important;
    }
  }

  .markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer>.cm-content,
  .markdown-preview-view.is-readable-line-width .markdown-preview-sizer {

    /* variables */
    --image-resizer-containar-width: 100%;
    --image-resizer-max-width: 100%;
    --image-resizer-position: center;

    --image-resizer-border-radius: 0px;

    > .image-embed,
    > div:has(.image-embed) {
      text-align: var(--image-resizer-position, 'center');
      // width: var(--image-resizer-containar-width, '100%');
      // max-width: var(--image-resizer-containar-width, '100%');

      img {
        max-width:var(--image-resizer-max-width, '100%');
        border-radius: var(--image-resizer-border-radius, '0px');
      }
    }

    > div[alt~="full"] {
      width: 100%;
      max-width: 100%;
      --image-resizer-max-width: 100%;
    }

    > div[alt~="wide"] {
      width: 88%;
      max-width: 88%;
      --image-resizer-max-width: 100%;
    }

    > div[alt~="fit"] {
      --image-resizer-max-width: 80%;
    }

    > div[alt~="half"] {
      --image-resizer-max-width: 50%;
    }

    > div[alt~="1/2"] {
      --image-resizer-max-width: 50%;
    }

    > div[alt~="2/3"] {
      --image-resizer-max-width: width: 66.66666666666667%;
    }

    > div[alt~="3/5"] {
      --image-resizer-max-width: 60%;
    }

    > div[alt~="4/5"] {
      --image-resizer-max-width: 80%;
    }

    > div[alt~="5/6"] {
      --image-resizer-max-width: 83.33333333333333%;
    }

    /* Position */
    > div[alt~="center"] {
      --image-resizer-position: center;
    }

    > div[alt~="left"] {
      --image-resizer-position: left;
    }

    > div[alt~="right"] {
      --image-resizer-position: right;
    }


    /* Border radius */
    > div[alt~="rounded"] {
      --image-resizer-border-radius: 10px;
    }

    > div[alt~="rounded-full"] {
      --image-resizer-border-radius: 9999px;
    }
  }
}

/* compat with obsidian theme*/
body:not(.zoom-off) .view-content .image-embed:not(.canvas-node-content):active {
  width: var(--image-resizer-containar-width, '100%') !important;
  max-width: var(--image-resizer-containar-width, '100%') !important;
}
body:not(.zoom-off) .view-content .image-embed:not(.canvas-node-content):active img {
  aspect-ratio: unset;
  top: 50%;
  z-index: 99;
  transform: translateY(-50%);
  padding: 0;
  margin: 0 auto;
  width: calc(100% - 20px) !important;
  max-width: calc(100% - 20px) !important;
  max-height: 95vh;
  object-fit: contain;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  opacity: 1; 
  border-radius: 0px !important;
}