How to get rid of strong image blur when sizes and 'background-size: cover' do not match?

Question

css

There are a number of 390px images on NNNpx.
The website is presented as follows:

<style>
.image{
   background-attachment: scroll;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   width: 390px;
   height: 545px;
}
</style>
<div class='image' style='background-image:(IMG_DINAMIC_URL_390px_NNNpx)'></div>

The bulk of the images - 390px by 545px
There is a series of images with a height of 495px
The image is centered and stretched - the blur is logical
But if you remake this miracle in the format of this smaller series of images - .image{height: 495px}
Then the reduced ones are blurred. Moreover, when decreasing, the blur disappears only if the relative percentage is a multiple of dividing by 2, i.e. 100%, 50%, 25%, 12.5%...
Is there any "feature" that will allow me to keep the sharpness on the fly when resizing to 88-89%?

Answer 1

Gaussian blur