Der Versuch, als Bildschirmhöhe und -breite CSS zu setzen Stil

Was ich versuche, ist die Höhe des Bildschirms und die Breite des Bildschirms zu tun bekommen und dann mit dem document.getElement.style.property = newStyle den Stil ändern die erzielte Höhe des Bildschirms und die Breite des Bildschirms. Ich habe versucht, die Höhe und Breite in Strings Herstellung zu verwenden, habe ich versucht, auch nur die Werte bei der Umsetzung. Ich möchte wissen, wie in px Werte und% Werte setzen. Vielen Dank.Der Versuch, als Bildschirmhöhe und -breite CSS zu setzen Stil

<!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>

Quelle

2016-05-27 unclebumble

Ich versuche, die Hintergrund-Größe in Reaktion auf dem Bildschirm des Benutzers Größe zu ändern, sorry wenn ich vage – unclebumble

sollten Sie versuchen,

background-size: cover;

So ist der Hintergrund die ganze Größe des Hintergrund deckt mit und cropoff den Überschuss. Wenn Sie wollen, dass der volle Hintergrund (trotz der Leerstellen auf der Oberseite oder Seiten) zeigen Sie „enthalten“ statt

https://jsfiddle.net/0vps9x0s/

Quelle

2016-05-27 02:29:21 LordNeo

Brilliant! Ich hatte über diese vergessen haben, +1 für das Halten es smart & einfach, danke und gut gemacht. –

Diese kürzeste & einfachste Antwort ist CSS zu verwenden, um das Hintergrundbild verwenden können, decken und schneiden Sie das überschüssige, mit diesem:

background-size: cover;

Wenn Sie "fit" wollen das Hintergrundbild mit dem Behälter, verwenden Sie diese:

background-size: 100% 100%;

Wenn Sie jQuery wollen verwenden, um die Breite & Höhe des Fensters zu erhalten und die Größe des Hintergrundbildes gesetzt, dies tun:

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");

Wenn Sie nur Vanilla JavaScript verwenden, um die Breite zu erhalten & Höhe des Fensters und stellen Sie die Größe des Hintergrundbildes, verwenden Sie diese:

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";

Viel Glück und alles Gute.

Quelle

2016-05-27 02:31:06

Der Versuch, als Bildschirmhöhe und -breite CSS zu setzen Stil

Antwort

Verwandte Themen