Question

我要做的是获取屏幕的高度和屏幕的宽度，然后使用document.getElement.style.property = newStyle将样式更改为获得的屏幕高度和宽度屏幕。我尝试将高度和宽度设置为字符串使用，我也尝试将值只放入。我想知道如何输入px值和％值。感谢。

<!DOCTYPE html>
<html lang = "en/US">
<head>
<title>
cyclebg test

</title>
<style>
body {
background: url("http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg") 
no-repeat;
background-position: center top;
background-size: 200px 100px;

}

p {
padding: 50px; background-color: green; margin-left: -1%; margin-right: -1%; display: block;


}


</style>
</head>


<body>

<p style = "margin-top: 25%;"> Hello World </p>      

 <p> Yo </p>
</body>


<script>

var heightOfScreen = screen.height;
var widthOfScreen = screen.width;
var heightOfScreenString = heightOfScreen + " px";
var widthOfScreenString = widthOfScreen + " px";
document.getElementsByTagName("body")[0].style.backgroundSize = "heightOfScreenString widthOfScreenString";
</script>


</html>

Answer 1

你应该尝试使用

background-size: cover;

因此，背景将覆盖整个背景大小并裁剪掉多余的背景。如果您想要显示完整的背景（尽管顶部或侧面有空格），您可以使用“包含”代替

https://jsfiddle.net/0vps9x0s/

Answer 2

这个最短的＆amp;最简单的答案是使用CSS来覆盖背景图像并裁剪多余的部分，使用：

background-size: cover;

如果您想“适合”背景图片到容器，请使用：

background-size: 100% 100%;

如果你想使用jQuery来获得宽度＆amp;窗口的高度和设置背景图像的大小，执行以下操作：

var width = $(window).width();
var height = $(window).height();
// NOTE: this does the same thing as "background-size: 100% 100%;"
$("body").css("background-size", width + "px " + height + "px");

如果您只想使用Vanilla JavaScript获取宽度和宽度窗口的高度和设置背景图像的大小，使用此：

var width = window.innerWidth;
var height = window.innerHeight;
// NOTE: this does the same thing as "background-size: 100% 100%;"
document.getElementsByTagName("body")[0].style.backgroundSize = width + "px " + height + "px";

祝你好运，一切顺利。

尝试将样式设置为屏幕高度和宽度CSS

2 个答案: