当我想让它们100%可拉伸时，我使用image而不是background-image，大多数浏览器都支持。

另一个背景-图像PRO: <ul>/<ol>列表的背景-图像。

如果背景图像是整体设计的一部分，并且在多个页面上重复使用，则使用背景图像。最好以背景精灵的形式进行优化。

对所有不属于整体设计的图像使用标签，并且很可能只放置一次，比如文章、人物的特定图像，以及值得添加到谷歌图像中的重要图像。

**我在<img>标签中唯一重复的图像是网站/公司标志。因为人们倾向于点击它进入主页，所以你用<a>标签来包装它。

一个小的输入， 我曾经遇到过响应式图像在iphone上的渲染速度减慢长达一分钟的问题，即使是小图像:

<!-- Was super slow -->
<div class="stuff">
    <img src=".." width="100%" />
</div>

但是当切换到使用背景图像时，这个问题就消失了，这只有在针对较新的浏览器时才可行。

还有一个原因!如果你有一个响应式的设计，并且想通过媒体查询来划分低分辨率、中分辨率和高分辨率图像的使用，那么你也应该使用背景。

如果你只想为页面上的特殊内容或仅为一个页面添加图像，你应该使用IMG标签，如果你想把图像放在多个页面上，那么你应该使用CSS背景图像。

我很惊讶没有人提到这个:CSS过渡。

你可以本地转换一个div的背景图像:

#some_div {
    background-image:url(image_1.jpg);
    -webkit-transition:background-image 0.5s;
    /* Other vendor-prefixed transition properties */
    transition:background-image 0.5s;
}

#some_div:hover {
    background-image:url(image_2.jpg);
}

这将保存任何类型的JavaScript或jQuery动画来淡化<img/>的src。

更多关于MDN转换的信息。