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

Question

我希望在常规屏幕和ipad中显示一个大图像，然后在移动屏幕中下拉到较小的图像，即不缩放的实际不同图像。我怎样才能通过css和html以及bootstrap（没有JS）实现这一点。有办法吗？感谢

Answer 1

有一种涉及background-image和媒体查询的hacky方法： 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，但目前这些都没有完全标准化或得到广泛支持。

通过放弃＆＃34;没有JavaScript＆＃34;你可能会得到最好的服务。要求并使用类似Interchange的内容。