响应图像的最大高度=视口-导航栏的高度。如何提供尺寸正确的图片资源？

Question

我的目标是将图像的最大高度限制为等于视口高度-导航栏的高度，以使图像始终在页面上始终可见。提供正确尺寸的图像时，这会引起一个小问题。

function fitImage() {
        var navHeight = $("nav.navigation").outerHeight();
        var viewport = $(window).height();
        $(".specific-image").first().css({"max-height":viewport-navHeight});
        $(".specific-image").show();
        $(".specific-image-flexbox").css({"min-height":viewport-navHeight+50});
    }

    fitImage();

    $(window).on("resize", fitImage);

我个人使用1920x1080px显示器和Google Chrome浏览器。这意味着我的个人视口高度为938px。导航栏为50px，因此图像的最大图像尺寸为888px。

如果我要使用自然尺寸为888px的图像，这对于使用1920x1080px显示器的每个人都是完美的，但是，每个使用分辨率更高或更低的显示器的人都会有一些缺点。

例如，使用高分辨率显示器的人会看到稍微拉伸的图像，因为对于他们来说，最大高度会有所不同，因为他们的视口会更高。

具有2560x1440像素监视器的人的视口为1251像素，这意味着最大图像高度为1251-50 = 1201像素。如果我将888px的图像表示为1201px，则质量会很差，因为它会被拉长。

具有较低分辨率显示器的人不会丢失任何图像质量，但是，即使他们不需要此高度，他们也必须加载自然尺寸为888px的图像，这会增加带宽并加载图像慢点。