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

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

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

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

Answer 1

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