2016-05-13 4 views
0

Я хотел бы, чтобы мое изображение css охватывало весь экран, я случайно выбираю изображение из массива JS. Он показывает изображение, но не показывает идеальное полное фоновое изображение страницы.Изображение CSS не покрывает весь экран

main.html

<html> 
    <head> 
    <link rel="stylesheet" href="main.css"> 
    </head> 
    <body> 

<button id = "button1">Click</button> 


    <script src = "main.js"></script> 
    </body> 
</html> 

main.js

document.getElementById("button1").addEventListener("click", function(){ 
     showImage(); 
    }); 
    ... 
    function showImage(){ 
    document.write('<img class = "bg" src="'+theImages[whichImage]+'">'); 
    } 

Main.css

img.bg { 
    /* Set rules to fill background */ 
    min-height: 100%; 
    min-width: 1024px; 

    /* Set up proportionate scaling */ 
    width: 100%; 
    height: auto; 

    /* Set up positioning */ 
    position: fixed; 
    top: 0; 
    left: 0; 
} 

@media screen and (max-width: 1024px) { /* Specific to this particular image */ 
    img.bg { 
    left: 50%; 
    margin-left: -512px; /* 50% */ 
    } 
} 
+0

Вы уверены, что хотите добавить '' как элемент? Если вам просто нужен фоновый рисунок, почему бы не использовать свойство css '[background-image] (https://developer.mozilla.org/en-US/docs/Web/CSS/background-image)', возможно, на ''? Затем вы можете просто установить «background-size: cover;» или «background-size: содержать;» или «background-size: 100%;», чтобы получить то, что вы хотите. – neilsimp1

+0

@neilsimp Я не думаю, что это сработало бы для меня, потому что я случайно выбираю изображение из массива изображений для фона. – Han

+1

'document.body.style ['background-image'] = 'url ("' + theImages [whichImage] + '")';' будет устанавливать это свойство. – neilsimp1

ответ

0

Что это за css? Я также не рекомендую использовать vw/vh.

Вы бы лучше с помощью стандартных фоновых размеров и позиции, как

/*background-image: url(../images/background.png);*/ optional 
background-size: cover; 
background-repeat: no-repeat; 
background-position: left top; 

и вы всегда можете добавить

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 

для полной совместимости с различными браузерами

0

Я согласен, что установка document.body.style['background-image'] атрибут будет лучшим способом, тем более что он позволяет вам справиться с формой изображения, не соответствующей форме экрана (исправить с помощью background-position и background-size). Если вы все еще хотите использовать <img>, вы можете использовать единицы длины CSS3 vh, vw. Поддержка современных браузеров можно найти here.

img.bg { 
    width: 100vw; 
    height: 100vh; 
} 

Обратите внимание на изображение не станет выше, чем вид-порт, даже если body элемент делает (т.е. есть прокрутки-бар).

Смежные вопросы