html - Bootstrap 响应式图像理想宽度

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

我应该为图片使用多少像素的宽度，我希望图片的质量尽可能高。

我没有否决任何 bootstrap css，所以它用于默认的 bootstrap 3。

我也知道图像分辨率越大，质量越好，但是 4k 图像在 bootstrap 中的 div sm 上是无用的，是一种资源浪费。

Answer 1

假设您使用固定容器和未经测试的 bootstrap CSS，小型设备的容器宽度为 750px(720px + grid-gutter-width)。这意味着最宽的列/图像可以是 720px(容器宽度 - 装订线)。因此，如果您想保证图像以最佳质量显示，它们必须至少有 720 像素宽和 1440 像素才能覆盖视网膜屏幕。