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});
    }
});

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

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

在它的边缘响应之前获取图像以在Bootstrap 3中达到

1 个答案: