If you are wondering why I'm using this, it's because I want the image to use the maximum width even if its original width is smaller then the infobox's (like here), but still limiting the maximum height.
The issue is, however, that (only) in Chrome there is a little white space on the right which I don't know how to get rid of. You can see some examples here or even better here (Chrome - Firefox). Inspecting the page, the width is actually in the correct size.
I tried to use object-fit: cover instead, but the images were sometimes being cut off (like here (screenshot), if you try to use it)
I know that the simplest solution would be to not resize the image, but isn't there a way to fix this?
Keep in mind that the native maximum height of the image is going to be 500px already. Vignette won't make it bigger than that. So if the maximum is 500px tall and you want to keep the aspect ratio and still make it bigger, that image is really difficult. Your best bet for that image is actually leaving it at 210px × 500px and not try to grow it any more with CSS.