css - 移动第一响应图像技术

Question

当前以移动优先方式处理响应式图像的标准方法是什么？

也就是说：今天是否有一种可接受的方法允许将小分辨率图像提供给移动/小屏幕宽度设备，而将较大分辨率图像提供给平板电脑/台式机等？

Answer 1

在标签上省略width和，如果它的父元素是响应式的，它会缩放。height<img />

Answer 2

就像 sanusart 写给你的那样。

例如，如果您使用 Twitter Bootstrap 扩展（被许多人认为是最好的或最好的面向响应式设计的框架之一）并将其设置为使用响应式设计（默认情况下未设置），那么您所要做的就是将您的图像放入响应式容器中，例如well：

<div class="well">
    <img src="img/logo.png" class="img-polaroid" />
</div>

您的图像将根据屏幕分辨率调整其尺寸。

如果你想用左右边距分开它，你可以使用流体布局，例如：

<div class="well">  
    <div class="row-fluid">
        <div class="span2"></div>
        <div class="span8"><img src="img/sunflower.jpg" /></div>
        <div class="span2"></div>
    </div>
</div>

但我们知道，在宽屏幕上（如纵向模式的手机），您的左右“分隔符”会上下堆叠，这可能会产生不必要的副作用。