Set Image Size limitation Free

/*********** Get Original Image While Reviewing ***********/
.Queue .indented-rem div {
	min-width: 100% !important;
}

.Queue .inline-block,
.Queue .tumbnail--with-width {
	min-width: fit-content !important;
	height: auto !important;
	max-height: 100% !important;
	overflow: auto;
	white-space: pre;
}

/*********** Get Original Image While Editing ***********/
[data-rem-tags~="ori"] .inline-block {
	min-width: fit-content;
	height: auto !important;
	max-height: 100% !important;
}


/*********** Tag Declutter ***********/
[data-rem-tags~="ori"] .items-center.hierarchy-editor__tag-bar__tag {
	background-color: transparent;
}

[data-rem-tags~="ori"] .hierarchy-editor__tag-bar__tag span {
	display: none;
}
7 Likes

Brother, please help me. :frowning:
I installed the CSS Block of your code, but I confess that it didn’t change anything in any image!
Maybe I’m not using it right. I’ve already tried putting a tag called “ori” and nothing has changed in the image… Anyway, how should I do it?

Hi @Robin_Hood

  1. Did you check that the code block which has the CSS code is in CSS mode?
  2. Did you tag the ori tag in the right place? The tag should be in a rem which has a photo you want to get the original size back.

This is the right use case. please try again!

If it did not work well, please share some screenshots or gifs explaining your state.
"re-copy and paste the image" would be a solution. if it failed and never be applied

I did exactly what you said, brother. :frowning:
What should I do?


It seems that one of the other CSS snippets is blocking it from its proper work.
Please try Toggling on/off other CSS snippets one by one.

Here is the lastest one.

/*********** Get Original Image While Reviewing ***********/
.Queue {
    width: calc(100% - 15%) !important;
    min-height: calc(100% - 20%) !important;
    position: relative;
    top: 10px
}

.Queue .indented-rem > div {
	min-width: auto !important;
}

/*********** Get Original Image While Editing ***********/
[data-rem-tags~="ori"] .inline-block {
	min-width: fit-content;
	height: auto !important;
	max-height: 100% !important;
}


/*********** Tag Declutter ***********/
[data-rem-tags~="ori"] .items-center.hierarchy-editor__tag-bar__tag {
	background-color: transparent;
}

[data-rem-tags~="ori"] .hierarchy-editor__tag-bar__tag span {
	display: none;
}

works for me thanks
It took sometime for me to workout the tagging properly.

1 Like

Hi friend! How do you tag correctly? I thought I just put “##ori”.
I noticed one thing: when using the tag, the aspect ratio is fixed (which is already wonderful), but the size is not equal to the original image. What could it be? @Browneyedsoul
The image I copy and paste is always automatically adjusted to one of those predefined sizes (small, medium and large).
Disabled all other CSS Codes:


1 Like

Within the same rem type (not a bullet) “#ori” then selected “#ori” select reference then find and select the CSS object, in mine it’s ‘Ori’ then press return. However, you don’t get the original image’s size as such rather the maximum available with indentation and whilst keeping the aspect ratio. You need to keep the levels of indentation that’s the point of rems.You can click on an image to see full screen or create it’s own document then reference or link to the image outside remnote. Better still if it’s in a pdf import and highlight

1 Like

Yes, It’s right. Thanx for explaining it @APC .
The main purpose of this snippet is just get back the original resolution of image.

Thank you so much, my friends!
@APC
@Browneyedsoul.

1 Like