HTML/CSS 如何更改 DPI 以保持原始图像 png 大小

如何解决HTML/CSS 如何更改 DPI 以保持原始图像 png 大小

所以我有一个程序可以创建具有可变 DPI 量的图像。 IE。用户可以以英寸为单位指定宽度和高度，然后指定 DPI，也就是说：

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

我的问题是如何在尝试在 html 文档中显示此图像时保留这些尺寸。我的理解是 html 站点以固定的 72 DPI 打印图像，因此即使在保持高度和宽度相同的同时提高 DPI 也会增加 html 文档中的图像大小。是否可以使用某种形式的 CSS 强制使用源 DPI（在本例中为 300）显示图像？即，如果 2 个图像被创建为 9 英寸宽和 6 英寸高，我可以让它们以相同的尺寸显示，而不管它们的源 DPI 是多少？

我已经设法在 Javascript 中编写了一个解决方案，其中用户提供缩放常数（即创建源图像时使用的 72 的倍数）作为数据属性，但是感觉不对，并且想知道是否存在CSS 中的正确解决方案？

参考我的 hack JS 解决方案：

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;
    })
}