css - 在 Bootstrap 3 到达边缘之前让图像响应地调整大小

Question

我的项目中有一个小图像，我想在分辨率发生变化时随时调整大小。我目前正在使用“img-responsive”类。使用此类，图片在窗口到达边缘之前不会开始调整大小。在这种情况下，由于它是一张相对较小的图片，因此永远不会发生这种情况。

是否有一个内置的 Bootstrap 类我可以用来让图像始终响应地调整大小？

Answer 1

我最终使用了 JavaScript

$(window).resize(function(){
    if($(window).width() < 1100){
        var width = $(window).width();
        var ceiling_width = 1100;
        var difference = ceiling_width - width;
        var decrease = difference * 0.2345;
        var full_logo_width = 404;
        var new_logo_width = full_logo_width - decrease;
        $("#my_logo").css({"width": new_logo_width});
    }
});

如果浏览器的宽度低于 1100 像素，那么图片将开始缩小。我的图片默认宽度为 404 像素（如果浏览器加载的宽度超过 1100 像素）。我希望图像的最小宽度为 200 像素多一点。基于此计算每个像素减少到每个窗口宽度减少变量（在这种情况下为 0.2345）。我使用以下 CSS 设置图像宽度的上限和下限。

#my_logo{
     max-width: 404px;
     min-width: 210px;
}