Question

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

我使用下面的代码，但是我希望对图像有更多的控制权，例如能够设置最小高度，任何想法？

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

Answer 1

只需使用CSS：

img { width: 100%; }

然后，您可以根据需要应用height或min-height。

要看到它正常工作，请调整这个小提琴的窗口大小：

Example fiddle

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

1 个答案: