移动第一响应图像技术

Question

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

那就是：目前使用的是一种可接受的方法，它允许将小分辨率图像提供给移动/小屏幕宽度设备，而将更高分辨率的图像提供给平板电脑/台式机等。

Answer 1

在width标记上省略height和<img />，如果它的父元素具有响应性，则会缩放。

Answer 2

正如sanusart写的那样。

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

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

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

如果您想将其与左右边距分开， 您可以使用fluid layout，例如：

<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>

但我们知道，在宽屏幕（如肖像模式下的手机）中，您的左右“分隔符”will be stacked top and bottom会产生不必要的副作用。