如何使用twitter bootstrap在我的网站上添加响应式图像支持？

Question

我正在使用twitter bootstrap构建一个网站。我的目标是我的网站只针对手机和标签用户。我想根据不同的屏幕尺寸调整图片大小。我尝试使用自适应响应图像http://adaptive-images.com/但是它的复杂方式。请建议我最好的替代解决方案。

Answer 1

阅读这篇文章，它解释了为响应显示优化图像和避免多个图像下载  http://mobile.smashingmagazine.com/2013/05/10/how-to-avoid-duplicate-downloads-in-responsive-images/

Answer 2

在Bootstrap中使图像响应的最简单方法是使用简单的CSS ..

img {
  border: 0;
  width: 100%;
  display: block;
  max-width: 100%;
}

Demo

如果您担心图像质量/高分辨率，我建议您查看Responsive Images这是一个基于屏幕尺寸加载不同分辨率图像（一次）的JS解决方案。