0

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

我可以使用下面的代码进行此操作，但是我希望对图像进行更多控制，例如能够设置最小高度，有什么想法吗？

也可能将图像包装在一个 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);
        }
    });
});
4

1 回答 1

1

只需使用 CSS：

img { width: 100%; }

然后，您可以申请height或min-height根据需要。

要查看它是否正常工作，请调整此小提琴的窗口大小：

示例小提琴

于 2012-05-02T12:08:31.997 回答