jquery - 在 bootstrap 3 中响应的 div 的背景图像

Question

我需要将页眉 div 的背景图片制作成比尔·盖茨先生在 http://www.gatesnotes.com/About-Bill-Gates/Summer-Books-2015 中的背景图片。

即使屏幕很小，比尔·盖茨先生的标题背景图片也没有改变高度。

我试过 background-size:cover 但当屏幕很小时高度仍然会改变。

我将 background-size:cover 放置到我的 Bootstrap 文件夹中的 custom.css。

Answer 1

查看此演示:https://jsfiddle.net/w8f0mkbg/1/

HTML

<div id="image">
    <img src="http://stylonica.com/wp-content/uploads/2014/02/nature-wallpaper-362.jpeg">
</div>

CSS

#image img {
    min-width: 100%;
    width: 100%;
    height: auto;
}

以背景图像为中心的响应式演示:https://jsfiddle.net/yeyene/905pc2p0/

*方法还是有很多的，大家可以试试看；

CSS 技巧: https://css-tricks.com/perfect-full-page-background-image/

粉碎: http://www.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-background-images/