Mobile First Responsive Image Technique

问题

What is the current standard way to handle responsive images in a mobile first approach?

That is: is there an accepted method in use today that allows small resolution images to be served to mobile/small screen width devices, while larger resolution images be served to tablet/desktop etc.?

回答1:

Omit width and height on the <img /> tag, if it's parent element is responsive it'll scale.

回答2:

Exactly, as sanusart wrote you.

For example, if you use Twitter Bootstrap extension (recognized by many as the best or one of the best responsive design-oriented frameworks) and set it to use responsive design (not set, by default), then all you have to do, is to put your image inside responsive container, for example well:

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

And your image will adapt its dimensions according to screen resolution.

If you would like to separate it with left and right margin, you can use fluid layout, for example like that:

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

But we aware, that on a wide screens (like phones in portrait mode) your left and right "separators" will be stacked top and bottom, which may produce unwanted side effects.

来源：https://stackoverflow.com/questions/11441280/mobile-first-responsive-image-technique