HTML/CSS how to change DPI to keep original image png size

So I have a program that creates images with a variable amount of DPI. I.e. the user can specify the width and height in inches and then the DPI, that is to say something like this:

save_image_as_png(
  image, 
  height = "9 inches",
  width = "6 inches",
  dpi = 300
)

My issue is then how to preserve these dimensions when trying to display this image in a html document. My understanding is that html sites print images with a fixed 72 DPI thus raising the DPI even whilst keeping the height and width the same will increase the image size in a html document. Is it possible to use some form of CSS to force the image to be displayed with the source DPI(in this case 300) ? i.e. if 2 images were created as being 9 inches wide and 6 inches tall can I get them to be displayed as the same size regardless of their source DPI?

I've managed to hack together a solution in Javascript where the user provides a scaling constant (i.e. what multiple of 72 was the source image created with) as a data attribute, however it feels wrong and was wondering if there was a proper solution in CSS ?

For reference my hack JS solution:

Html

<img src="my_image.png" class="scaleme" data-scale="5" />

JS

$(window).ready(fix_image_dim);
$(window).resize(fix_image_dim);
function fix_image_dim() {
    var imgs = $(".scaleme");
    imgs.each(function(index){
        var x = imgs[index];
        var scale = $(x).data("scale") || 4;
        var ratio = x.naturalHeight / x.naturalWidth;
        var maxwidth = x.naturalWidth / scale;
        if( x.width >= maxwidth){
            $(x).css({ 'width' : ''});
            x.width = maxwidth;
        } else {
            $(x).css({ 'width' : '100%'});
        }
        x.height = x.width * ratio;
    })
}