twitter-bootstrap-3 - 在 Bootstrap 中交换图像以适应不同的屏幕尺寸

Question

我想在常规屏幕和 ipad 上显示一张大图像，然后在移动屏幕上显示一个较小的图像，即未缩放的实际不同图像。我怎样才能只用 css 和 html 和 bootstrap (没有 JS)来实现这一点。有办法吗？谢谢

Answer 1

有一种有点 hacky 的方法，涉及 background-image和媒体查询: http://www.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-backgrounds/

(有关生产就绪且经过实战测试的版本所需的其他详细信息，请参阅完整文章。)

归结为:

#image { 
  background-image: url(your-large-image.jpg); 
}

@media only screen and (max-width: 320px) { // change/add media queries as necessary
  #image { 
    background-image: url(your-small-image.jpg); 
  }
}

---

<div id="image"></div>

---

还有 <picture> element和 srcset attribute ，但目前这些都没有完全标准化或得到广泛支持。

放弃“无 JavaScript”要求并使用类似 Interchange 的内容可能会为您提供最好的服务。 .