Question

在高分辨率移动设备（例如iPhone，iPad等）上，我的jumbotron背景图像仅占浏览器高度的一半左右。我希望我的背景图像能够覆盖高分辨率移动设备上的大部分（如果不是全部）屏幕。

http://nelsonforfresno.org/ - 我正在尝试将图片实现到

的网站

CSS代码我用于背景图片...

select * from your_table where datepart(year, dt) = 2015

Answer 1

像这样设置图像的宽度和高度

.donate-hero {
    background: #485563 url(../img/donate-bg.jpg) no-repeat center center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    width:100wh;
    height:100vh;
}

注意：如果图像是页面上唯一的元素，这将使图像占用所有浏览器空间

编辑：有关vh和wh测量的更多详细信息，请参阅此链接

http://thenewcode.com/660/Using-vw-and-vh-Measurements-In-Modern-Site-Design

Answer 2

这个元标记对我有用。它帮助我指示浏览器缩小整个网页以适应屏幕，无论与该设备相关的设备像素比率（即iPhone，iPad，平板电脑等）。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

http://www.w3schools.com/css/css_rwd_viewport.asp

如何使我的背景图像覆盖视网膜设备上的整个屏幕？

2 个答案: