Twitter Bootstrap响应式背景图片

Question

Twitter Bootstrap响应式背景图片

htmlcsstwitter-bootstrapbackground-imagesingle-page-application

3

我正在尝试制作一个类似于这个网站的网站：http://www.awerest.com/demo/myway/light/ 这是一个单页面网站，具有响应式图像，可在任何设备上占据整个屏幕。我的问题是我无法找到一种方法来使背景图像在任何设备上都全屏显示。

<img src="C:\Users\Jack\Desktop\City-Skyline.jpg" class="img-responsive" alt="Responsive image">

我看到了这个内容，但没有找到答案。如果有人能指导我如何做这件事，我将非常感激。

- Jack

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SW4 · Accepted Answer

关键部分在于将你的内容高度设置为相对于视口（html元素）的100%。通过将背景图像应用于 div 而不仅仅是使用 img，您还可以更灵活地显示它，background-position 使其始终居中，background-size:cover 使其按比例缩放。

演示 Fiddle

HTML

<div></div>
<div>More Content</div>

CSS

html, body {
    height:100%;
    width:100%;
    position:relative;
    margin:0;
    padding:0;
}
div:first-of-type {
    height:100%;
    width:100%;
    background-image:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSbcnkIVXLz23PALu8JD-cTGe8KbXKC1JV0gBM_x1lx3JyaNqE7);
    background-size:cover;
    background-position:center center;
}
div:last-of-type {
    background:green;
    position:relative;
    color:white;
    height:100%;
}