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>

Bootply

我应该将px的宽度用于图片，我希望图片的质量最高。

我没有推翻任何bootstrap css所以它是默认的bootstrap 3。

另外我知道图像分辨率越大，质量越好，但是4k图像在bootstrap中的div sm上没用，并且浪费资源。

Answer 1

假设您使用固定容器和未装备的引导程序CSS，小型设备的容器宽度为750px（720px +网格 - 装订线宽度）。这意味着最宽的列/图像可以是720px（容器宽度 - 装订线）。因此，如果您想保证图像以最佳质量显示，则它们必须至少为720px宽和1440px才能覆盖视网膜屏幕。

Answer 2

没有最大的浏览器宽度，因此简短的答案是＆＃34;尽可能大的＆＃34; （但考虑到图像越大，加载所需的时间越长）。

我想以类似于Bootstrap的方式做到这一点。 Bootstrap尺寸从超小到大，它认为大容器（当不是流体时）宽度为1170px，所以它必须至少为其中的三分之一，390px（如果我们移除装订线空间则为330px）。

此外，在小屏幕上以全宽显示，引导程序认为有750px（如果我们移除装订线空间则为720px），因此最小更新为720px。

但是，如果您希望您的网络在视网膜设备或类似设备上看起来很棒，那么您应该使用两倍大的图像，因此结果将是1440px（但您应该在那种设备中使用那些大图片）

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

Answer 3

当浏览器宽度为768像素或更小时，col-md-4类强制bootstrap将三个水平图像分成三列。排水沟宽度为15px左右 最佳图片宽度为738px。 这适用于最大3 * 768 = 2304px的屏幕宽度。大多数屏幕将在此下面（见下文）

https://www.w3schools.com/browsers/browsers_display.asp

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

Bootstrap响应图像理想的宽度

3 个答案: