Can't resize image in anki 2.1.51

I just switched to the newest anki version (2.1.51) and I am having trouble changing the image sizes.

I wanted to resize images to make them small enough so that 4 images will all appear in a row but when I go into the editor, double click on an image and drag so that each image is small enough to all fit in a row, once I close the editor it appears as if nothing changed at all (aka original size). Can anyone help me?

I want something like this:

But I end up getting this:

Even though this is what the editor after changing the sizes of the image shows me:

You probably have inline styles in your img HTML tags that interfere with the native resizing method. E.g. when you got this image:

image

with the following HTML:

<img style="width: 1068px; height: 723px;" src="image_src" width="214">

The style will overrule the width attribute set by Anki’s resize handle, thus rendering it useless.

Please open the field HTML editor with Ctrl+Shift+X while the field is focused, and then attach a screenshot of the content.

If you often need to quickly resize many images at once, and you want them all to have the same exact height, you could try this alternative method, which uses the card template to resize the images

  1. Open the Add card/Edit card menu
  2. Add two new fields, one called Img_minheight, the other called Img_maxheight
  3. Open the template editor (“Cards” button) and add this code to the Front and Back template of your cards:
<style>
img {
min-height: {{Img_minheight}}px;
max-height: {{Img_maxheight}}px;
}
</style>
  1. Write a number in the Img_maxheight field, e.g. 200
    If all your images had a height ≥ 200 pixels, they will now all have a height of 200 pixels (or better: they will be displayed as having an height of 200 px)
  2. If some of them are smaller than 200 pixels, you can write 200 in the Img_minheight field to make them larger

The images will be resized only while reviewing, not in the editor
You can do and undo the resizing as many times as you want

Unfortunately, I want to have different image sizes depending on the card. Would it be possible to use your method and have preset card settings in order to fit 1, 2, 3 or 4 images in a row? That way I could toggle between the different card size settings for each card.

Also even if I do change the sizes of each image in the HTML editor, I get something like this

Is there a way to make it so that they all appear on the same line?

This resizing method is card/note specific!
Each card/note will have its own maximum height for images, depending on what you write in its Img_maxheight field

(I personally use this method to quickly resize all the images of a card/note at once, then I want to make some images smaller than the others I use this addon: Image Style Editor - AnkiWeb)

Please post a screenshot of what you see after opening the HTML editor, and also a screenshot of your card templates (Front, Back, Styling section)

1 Like

Styling:
.card {
font-family: georgia;
font-size: 30px;
text-align: center;
color: black;
background-color: white;
word-wrap: break-word
/* background: url(“image.png”) repeat; */
margin: 0;
margin: 1ex 0em;
}

.textstyling {
margin: .75ex 1.15em
}

.mobile .night_mode .textstyling {
margin: 1.5ex .75em;
color: #00aaff !important;

}

img {
display: block;
margin: auto;
width: 100%;
}

.card img {max-width: 50%; max-height: none;}
.mobile .card img {max-width: 100%; max-height: none;}
.mobile .card {margin: 0ex 0em;}
.mobile #content {margin: 0ex 0em;}

/* The glorious king wishes you the best as you prepare for boards! Stay strong my friends!*/

html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
/*background: transparent; optional: just make scrollbar invisible /
}
/
optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}

a {
color: #2f4f4f;
text-decoration: inherit;
font-family: Times New Roman;
font-size: 9px;
font-style: normal !important;
font-weight: lighter !important;
}

body, div
{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(“image.png”) repeat;
}

img#star { max-width: 50px; }

.entiresketchstyle {
}

.card.night_mode {
color: #0f0;
background-color: black;
font-weight: bold !important;
margin: 0;
margin: .25ex 0em;
}

.cloze.night_mode {
color: #F4F406;
}

.entiresketchstyle {
font-size: 12px;
font-style: italic !important;
font-weight: lighter !important;
}
/*Start of style added by resize image add-on. Don’t edit directly or the edition will be lost. Edit via the add-on configuration */
.mobile .card img {height:unset !important; width:unset !important;}
/End of style added by resize image add-on/

Try this: go to the styling section, search for this code:

img {
display: block;
margin: auto;
width: 100%;
}

Then delete display: block;

2 Likes

That worked! Thank you!!

1 Like

If you delete that width line, your resizing should take effect, too.

You can also delete that part:

1 Like

For some reason the resizing still does not work

This is the new styling section:
.card {
font-family: georgia;
font-size: 31px;
text-align: center;
color: black;
background-color: white;
word-wrap: break-word
/* background: url(“image.png”) repeat; */
margin: 0;
margin: 1ex 0em;
}

.textstyling {
margin: .75ex 1.15em
}

.mobile .night_mode .textstyling {
margin: 1.5ex .75em;
color: #00aaff !important;

}

img {
margin: auto;
}

.card img {max-width: 100%; max-height: none;}
.mobile .card img {max-width: 50%; max-height: none;}
.mobile .card {margin: 0ex 0em;}
.mobile #content {margin: 0ex 0em;}

/* The glorious king wishes you the best as you prepare for boards! Stay strong my friends!*/

html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
/*background: transparent; optional: just make scrollbar invisible /
}
/
optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}

a {
color: #2f4f4f;
text-decoration: inherit;
font-family: Times New Roman;
font-size: 9px;
font-style: normal !important;
font-weight: lighter !important;
}

body, div
{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(“image.png”) repeat;
}

img#star { max-width: 50px; }

.entiresketchstyle {
}

.card.night_mode {
color: #0f0;
background-color: black;
font-weight: bold !important;
margin: 0;
margin: .25ex 0em;
}

.cloze.night_mode {
color: #F4F406;
}

.entiresketchstyle {
font-size: 12px;
font-style: italic !important;
font-weight: lighter !important;
}

.extrastyle img {
display: inline;
width: 50%;
}