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

Question

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

score 2 · Accepted Answer

阅读这篇文章，它解释了如何优化图像以进行响应式显示并避免多张图像下载 http://mobile.smashingmagazine.com/2013/05/10/how-to-avoid-duplicate-downloads-in-responsive-images/

score 1 · Accepted Answer

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

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

如果您担心图像质量/高分辨率，我建议您查看响应式图像，这是一种 JS 解决方案，可根据屏幕尺寸（一次）加载不同分辨率的图像。

2 回答 2