How to scale an image roughly?

[madjxatw]

The only way I know by far is setting width and height in the attr_list. Most of the time, I don't care about the accurate size of an image, but only want to scale the image to roughly fit the page. Hence I would rather have a feature that can scale up/down the image by percentage than calculate the accurate pixel size. Any way in mkdocs-material to achieve this?

[kamilkrzyskow]

Hello @madjxatw,
by default bigger images are always scaled down to fit the width of the reading viewport, but you can use extra CSS to modify the styling for images: https://squidfunk.github.io/mkdocs-material/customization/#additional-css

/* Scale to fit the page */
/* Small images will become very blurry */
/* Not recommended */

.md-content__inner img {
    width: 100%;
}

/* Scale to fit the page with constraints */
/* Smaller images will be min 25% of the width, so not as blurry */
/* Bigger images will be max 90% of the width, better for centring (?) */


.md-content__inner img {
    min-width: 25%;
    max-width: 90%;
}

/* Center the images */

.md-content__inner img {
    display: block;
    margin: 0 auto;
}

/* Add outline to make them pop */

.md-content__inner img {
    outline: 1px solid var(--md-accent-fg-color);
}

Example docs: scale-images.zip

[madjxatw]

@kamilkrzyskow , thanks for your advice! Although images are automatically scaled down to fit the viewport, some of them may still look too big with the surrounding text. CSS could be a workaround, but not that flexible, as not all the images that I need the same the width or height limit. This makes me a bit missing Sphinx where ReST has a scale attribute that supports percentage.

[alexvoss]

missing Sphinx where ReST has a scale attribute that supports percentage

That's the equivalent of assigning a specific scale factor to each image. With CSS you can a) set attributes for all images as in the example above b) treat different types of images differents or c) assign each image a specific style.

a) is what @kamilkrzyskow provided above, which is the most general solution and the only one we can give without knowing/delving into the specifics of your case
b) can be done by assigning images a CSS class using attribute lists
c) can be done by specifying a width for an individual image, again using attribute lists:

![Image title](https://dummyimage.com/600x400/eee/aaa){width=100%}

[kamilkrzyskow]

After looking at: https://stackoverflow.com/questions/63392775/is-there-a-way-to-set-the-image-scaling-method-in-rest-sphinx
and reading the first answer,
I think scale does use the percentage to calculate the pixel dimensions and then sets a static pixel width with CSS.

So it doesn't really scale with the viewport later, because it's not 50% of the viewport width, but 50% of the actual image size 🧐

So perhaps this answer will help with the transform:
https://stackoverflow.com/questions/8397049/how-can-i-resize-an-image-to-a-percentage-of-itself-with-css

@alexvoss Setting width with percentage with attribute list probably won't work, as the value should be pixels, but I don't know for sure
https://www.w3schools.com/tags/att_width.asp

Therefore combining everything this might work, but I didn't test it:

![Image title](https://dummyimage.com/600x400/eee/aaa){: style="transform: scale(0.5);"}

[alexvoss]

@kamilkrzyskow you may be right, it might just happen to work in Firefox, which I use. Sorry about that.

Your final solution seems to work fine. Of course, shipping an image twice the size and then scaling it down to a specific size is only one way. Unless the images are used at other scales, it might be better to scale them in advance, using a tool like Imagemagick. That might involve writing a small script. There are ways to do this from within Python as well, no doubt.

[madjxatw]

@kamilkrzyskow, I've tested your solution and it works, thanks for your warm help!