2013-12-07 6 views
0

До сих пор: Изображение показано в браузере, но оно не изменяется.Span banner image через ширину окна браузера

<html> 

<img id="banner" src="c:/Users/Name/Downloads/picture.jpg" alt="banner" /> 


<Script> 

var X = screen.width; 
var Y = screen.height; 

banner = document.getElementById('banner'); 
banner.style.width = X + 'px'; 
banner.style.height = (Y/5) + 'px'; 


</Script> 

</html> 

Другие попытки:

Показать изображение с помощью чисто Javascript

  • Ширина и высота переменных доступны через Javascript

Во-первых, попробуйте без каких-либо спецификации размера

  • изображение не отображается, когда я использую:

    document.write("<img src='c:/Users/Name/Downloads/picture.jpg' />") 
    

Будущие мысли:

Моя следующая попытка будет пытаться передать JavaScript ширина и высота переменных в HTML, так как ему кажется, что html-изображение всегда показывает и дает правильные спецификации размера, тогда это было бы именно то, что я хочу. Я отправлю это здесь, если найду успешный метод.

+0

Почему бы вам не использовать CSS стиль его занять ширину браузера, а не с помощью Javascript? – AVP

+0

Это работает ... [** FIDDLE **] (http://jsfiddle.net/9mxTU/) – akinuri

+0

@akinuri Спасибо за эту ссылку. Я считаю, что в синтаксисе было что-то немного неправильное. Однако он работает только с URL-адресами. Когда я пытаюсь использовать персональный файл, он создает пустую ячейку. Но контейнер для изображения есть и правильный размер. –

ответ

0

разметка и CSS, как это должно сделать трюк для вас.

<div class="banner"></div> 

div 
{ 
    background:url(https://www.google.com/images/srpr/logo11w.png) no-repeat left top; 
    width:100%; 
    height:200px; 
    background-size:cover; 
} 

Или еще лучше, вы можете попробовать этот CSS вместо выше

div 
{ 
    position:fixed; 
    left:0px; 
    right:0px; 
    top:0; 
    height:250px; 
    background:url(https://www.google.com/images/srpr/logo11w.png) no-repeat center center; 
} 
Смежные вопросы