Html 引导响应图像理想宽度

我的问题很简单

我有一个有响应图像的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>

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

我没有否决任何引导css，所以它是默认的引导3

---

此外，我知道图像分辨率越大，质量越好，但4k图像在引导中对div sm毫无用处，这是一种资源浪费。

没有最大的浏览器宽度，因此简短的回答是“尽可能大”（但要考虑到图像越大，加载时间越长）

我想做的是以一种类似于引导的方式来做。引导大小从超小变大，它认为大容器（非流体时）的宽度为1170px，因此它必须至少为该宽度的三分之一，即390px（如果移除排水沟空间，则为330px）

此外，在小屏幕上的全宽度显示Bootstrap认为具有750px（720px，如果去除槽空间），因此最小更新为720px.

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

---

我会在大小和重量之间寻找折衷的解决方案。

假设您使用固定容器和未测试的引导CSS，小型设备的容器宽度为750px（720px+网格槽宽度）。

---

这意味着最宽的列/图像可以是720px（容器宽度-槽）。因此，如果您想保证图像以最佳质量显示，它们必须至少为720px宽和1440px以覆盖视网膜屏幕。

当浏览器宽度小于等于768像素时，col-md-4类强制引导将三个水平图像拆分为三列。排水沟宽度为15px左右 最佳图像宽度为738px。 这将适用于高达3*768=2304px的屏幕宽度。 大多数屏幕将在本节中介绍（见下文）

---

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

您是指实际图片的大小还是可以在CSS中指定给这些图片的大小？@实际图片的术士大小。我在任何地方都找不到px中响应图片的最佳宽度。以下是任何目标设备的“列宽”？图像的大小将取决于此。（..不一定，但…）您可以使用引导的布局断点限制作为首选视图的图像大小。@术士我希望网站在任何设备上以尽可能高的质量显示图像。