Javascript 包裹在div中的可调整大小/流体图像？

我试图让一些图像在窗口调整大小时自动调整大小

我有这个与下面的代码工作，但我想有一个多一点的图像控制，如能够设置一个最小高度，任何想法

也可以将图像包装在一个div中，这样就有了更多的控制？我不擅长js，所以任何帮助或解释都会有帮助

$(function() {
    var $img = $(".l");  
    var ratio;
    var offsetX = $img.offset().left;
    var offsetY = $img.offset().top;

    $(window).load(function () {
        ratio = $img.width() / $img.height();
        $(this).resize();
    });

    $(window).resize(function () {
        var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
        var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
        var availWidth = viewportWidth - offsetX - 70;
        var availHeight = viewportHeight - offsetY - 70;

        if (availWidth / availHeight > ratio) {
            $img.height(availHeight);
            $img.width(availHeight * ratio);
        } 
        else {
            $img.width(availWidth);
            $img.height(availWidth / ratio);
        }
    });
});

只需使用CSS：

img{宽度：100%；}

然后，您可以根据需要应用

height

或

minheight

要查看其工作情况，请调整此小提琴的窗口大小：

---

是的，我有一个css版本，不使用任何js，但我很好奇这将如何与js一起工作。