自举响应图像理想宽度

Question

我的问题很简单。

我有一个带有响应图像的div。在sm上，div是全宽度的，如：

 <div class="row">

    <div class="col-md-4">
        <img src="/img/picture1.jpg" class="img-responsive">
    </div>

    <div class="col-md-4">
        <img src="/img/picture2.jpg" class="img-responsive">
    </div>

    <div class="col-md-4">
        <img src="/img/picture3.jpg" class="img-responsive">
    </div>

 </div>

引线

在px的宽度，我应该使用的图片，我想要最高质量的图片，这是可能的。

Im没有推翻任何引导css，所以它的默认引导3。

我也知道图像分辨率越大，质量就越好，但是4k的图像对于引导中的div来说是无用的，是对资源的浪费。

Answer 1

假设您使用固定容器和未体验过的引导CSS，小型设备的容器宽度为750 is (720 is+网格-沟槽宽度)。这意味着最宽的列/图像可以是720 be (容器宽度-沟槽)。因此，如果你想保证图像以最好的质量显示，它们必须至少有720 if宽，1440 if覆盖视网膜屏幕。

Answer 2

没有最大的浏览器宽度，所以简短的答案是“尽可能大”(但要考虑到图像越大，加载所需的时间就越长)。

我想做的是用一种类似于Bootstrap的方式。引导系统的尺寸从非常小到大，它认为大型容器(当不流动的时候)的宽度是1170 we，所以它必须至少是这个宽度的三分之一，390 we(如果去掉排水沟空间的话，是330 we)。

此外，它显示在小屏幕的全宽度，引导认为有750 at (720 at，如果我们删除沟槽空间)，所以更新到720 at的最小值。

但是，如果你想让你的网络在视网膜设备或类似的设备上看起来很棒，你应该使用两倍大的图像，所以结果是1440 of (但是你应该在那种设备中使用那些大的)。

我会在尺寸和重量之间寻找一个妥协的解决方案。

Answer 3

在浏览器宽度为768像素或以下时，col-md-4类强制引导将三个水平图像分割为三列。沟槽宽度是15 to，所以，最好的图像宽度是738 to。，这将适用于屏幕宽度高达3*768 =2304 to。大部分屏幕都将覆盖在下面(见下文)。

display.asp

对于更大的宽度，您应该根据需要进行测试.