feat(imsize): rework image styling to get more control

[St1ggy]

These changes are necessary in order to gain more control over the appearance of the images in cases where we need to maintain the proportions when resizing the container.
Now this is a bit bugged - when the height exceeds the expected one, we see empty space around the image from above and below

[d3m1d0v]

plz, add more tests:

• with only height in percent
• with width and height in percent

[St1ggy]

Problem: If we have an image with predefined dimensions in the markup (height and width), then when it is displayed in a container, it is assumed to be of those sizes. However, the CSS already sets max-width: 100%, limiting the image to the width of the container. This causes a problem of "transparent frames" at the top and bottom when the image's width decreases along with the width of the container. The height remains constant, not depending on the proportions of the image.

The proposed solution in the pull request allows us to control how the image displays according to its proportions. When we resize the container, the image's width will decrease as before, but its height will now depend on an aspect-ratio parameter instead of the height attribute. This allows the image to shrink and expand proportionally, without the bug of empty frames at the top and bottom.

P.S. I also added some tests with percent sizes

[shevnv]

I'm not sure that right proportions for image are more important than height+width from markup.

[shevnv]

Why we still need height and width attributes?

[St1ggy]

transform/src/transform/plugins/changelog/index.ts

Lines 77 to 78 in bff7df9

	const width = Number(imageToken.attrGet('width'));
	const height = Number(imageToken.attrGet('height'));

Alas, that's why we still need it

[St1ggy]

I also noticed complaints about incorrect image appearance when the height was not proportional. However, I did not see any requests for a stretched image or an image with extra frames.

[St1ggy]

The proportions of the image are calculated based on the height and width specified in the markup. If the container is larger than these dimensions, the image will maintain its original height and width. If the width of the container is less than the width of the image, the image's width will adjust to 100% of the container's width and the height will be adjusted proportionally based on the original height and width values from the markup.

[St1ggy]

We need to enforce the 'aspect-ratio' rule for inline CSS sanitizing. Otherwise, this rule may be ignored and some artifacts may occur.

[makhnatkin]

1. I suggest replacing it with an interface that has an additional parameter for uniformity and future expansion of functionality.

    html: string,
    options?: SanitizeOptions,
    additionalOptions?: SanitizeOptions,

2. Then it will be:

    if (forcedSanitizeCssWhiteList) {
        sanitizeOptions.cssWhiteList = {
            ...sanitizeOptions.cssWhiteList,
            ...additionalOptions.cssWhiteList,
        };
    }

[makhnatkin]

maybe better is enableInlineStyling