Madhukar Pallam Ответов: 4

Как установить ширину изображения заголовка сайта, чтобы заполнить 100% браузера или экрана..?

я разрабатываю веб-сайт. я хочу установить ширину заголовка imge на 100% экрана.
когда я сижу 
<img src="image.jpg" width=100%>
работает, но пользователь нажимает кнопку restore_down изображение заголовка сжимается, но мне нужно установить ширину изображения как ширину экрана.
Потому что у всех клиентов нет одинакового разрешения.

Миллионы благодарностей заранее.....

[no name]

Это не совсем понятно. Изображение находится на 100% в браузере, даже если размер браузера изменен? Если размер браузера изменен, изображение не может быть шириной экрана, потому что само окно браузера не является таковым.

Madhukar Pallam

Спасибо Марку Нишалке за вашу репалию, вот мое требование

Когда браузер изменит размер, должна появиться полоса прокрутки. но ширина изображения должна быть такой же, как разрешение экрана.... и вы можете опубликовать пример кода... я использую JSP.

Спасибо..

[no name]

Ширина изображения не может быть такой же, как ширина экрана. Приложение веб-браузера, окно, в котором отображаются веб-страница и изображение, не является полноразмерным. Содержимое не может превышать размер окна.

vino2012

Пожалуйста, напишите ваш заголовок, теги HTML с помощью CSS .......................

4 Ответов

Рейтинг:
2

vino2012

поместите изображение заголовка в качестве фона для div или таблицы , td

1. если ваш костюм изображения для повторного-х собственность , то это легко исправить ширина:100%; для всех резолюция PC , ноутбук (в том числе-Минимальная высота,максимальная ширина экрана ноутбука) и все устройства, как iPad,для iPod,iPhone ,и т. д.
Это УР CSS, если образ соответствует повторять х
фон:url ( - - - - ) repeat-x left top;

в противном случае вариант 2

2. Если изображение ur не подходит repeat-x , вы должны использовать скрипт javascript(j-query), чтобы изображение соответствовало всем браузерам,ОС и устройствам.
если это исправить, то jquery будет играть роль поиска ширины окна браузера и добавления соответствующего атрибута ширины к изображению.......

<img src="--- - "></img>




У меня есть код, если вы хотите ответить мне.......



                                

                            

                                                            

                                    

                                        Madhukar Pallam
                                        
                                    

                                    
Вот мой код:


<html>

<style type="text/css">

        див.заголовок{позицию: абсолютная; сверху: 0px; слева:0px; ширина: 100%}

</стиль>

<тело>

        <div class="header">

            <img src="Header2.png" style="height:10%; width:100%"/>    

        </div>

</body>

</html>


                                

                                                    

                                            

                            
Рейтинг:
 2


                            

                                

                                    vino2012
                                    
                                

                                

    <html>

<голова>

&л;тип сценария="текст/яваскрипт" СРЦ="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"&ГТ;&ЛТ;/скрипт>

<script type="text/javascript">

    var contWidth=120;

    var contHeight=83;

	var bgOrigWidth=1280;

    var bgOrigHeight=632;

$(документ).готово(функция() {


    изменить размер();


	$(окно).связать('изменить размер', функция(){размер();});


});





изменение размера функции()

{ 


    var myWidth;

	var myHeight;


	if( typeof( window.innerWidth ) == 'number' ) { 


	//Non-IE 


	= окно myWidth.расстояние между;

	myHeight = window.innerHeight; 



	} остальное, если( документ.функцию documentelement и усилитель; & 


	( документ.функцию documentelement.значения свойств clientwidth || документ.функцию documentelement.clientHeight ) ) { 


	//IE 6+ в режиме "соответствие стандартам" 


	myWidth = документ.функцию documentelement.значения свойств clientwidth; 

	myHeight = document.documentElement.clientHeight; 


	} else if( документ.тело и усилитель; & ( документ.тела.значения свойств clientwidth || документ.тела.clientHeight ) ) { 


	//Т. е. 4 совместимый 


	myWidth = документ.тела.значения свойств clientwidth; 

	myHeight = document.body.clientHeight;



	} 

	if(contWidth > myWidth){

		myWidth=contWidth;

	}

	if(contHeight > myHeight){

		myHeight=contHeight;		

	}

	//document.getElementById("contentFrame").style.left=((myWidth-contWidth)/2)+"px";

	//document.getElementById("contentFrame").style.top=(myHeight-contHeight)/2+"px";	

	//alert((bgOrigWidth-myWidth)+" > "+(bgOrigHeight-myHeight));


	var heightDiff=bgOrigHeight-myHeight;


	var widthDiff=bgOrigWidth-myWidth;


	var heightDiffPercent=(heightDiff/bgOrigHeight)*100;


	var widthDiffPercent=(widthDiff/bgOrigWidth)*100;


	if(widthDiffPercent > heightDiffPercent){	

		newHeight=myHeight;

		newWidth=(myHeight/bgOrigHeight)*bgOrigWidth;


	}еще{

		newWidth=myWidth;

		newHeight=(myWidth/bgOrigWidth)*bgOrigHeight;


	}

	//alert("newWidth: "+newWidth+" .. "+"newHeight: "+newHeight+" .. "+(bgOrigWidth-myWidth)+" > "+(bgOrigHeight-myHeight))

	//var imgArr=document.getElementsByTagName("img");

	//imgArr[0].src="images/background/bg_home_1.jpg";


	ВАР Мгар=$("#img_bg");


	imgArr.css("width",newWidth+"px");

	imgArr.css("height",newHeight+"px");



	//imgArr.width=newWidth;

	//imgArr.height=newHeight;	

   // return newWidth+"|"+newHeight;


}





</script>



<style type="text/css">



тело

{

прокладка:0px;

маржа:0px;

}

HTML

{

переполнения:скрытые;

}



</стиль>

</head>

<тело>


<div style="overflow:hidden;">


   	<img id="img_bg" src='Header2.png' />	


</div>


&ЛТ;/тело&ГТ;&ЛТ;/HTML и ГТ;





                                

                            

                                                            

                                    

                                        vino2012
                                        
                                    

                                    
Если вам нужна только ширина , то прокомментируйте все коды, связанные с высотой, на приведенном выше коде....................


                                

                                                            

                                    

                                        [no name]
                                        
                                    

                                    
Отформатируйте фрагменты кода


                                

                                                            

                                    

                                        vino2012
                                        
                                    

                                    
не могу понять............


                                

                                                            

                                    

                                        [no name]
                                        
                                    

                                    
Тогда позвольте мне высказаться. 
ФОРМАТИРУЙТЕ ФРАГМЕНТЫ КОДА ПРИ ПУБЛИКАЦИИ. 

Какую часть из этого ты не понимаешь?


                                

                                                            

                                    

                                        vino2012
                                        
                                    

                                    
В текстовом поле решения - штрих-код инструмента - что я должен выбрать для форматирования ?


                                

                                                    

                                            

                            
Рейтинг:
 1


                            

                                

                                    Member 10641135
                                    
                                

                                

    </head>

<тело>

<html>

&ЛТ;див ИД="основная"и GT;

	<div class="contentarea">

		<div class="imagearea">

		 &ЛТ;див выровнять="центр"&ГТ;&ЛТ;"/*рисунка*/" ширина=100% высота="360px"&ГТ;&ЛТ;/дел&ГТ;

		</div>

	</div>

</div>


</body>

</html>



<стиль>
/* CSS Document */
body{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    margin:0 auto}

#main{
    width:100%;
    height:2000px;
    background-color: #FFFFCC;
}

#contentarea{
    margin:0 auto;
    width:1000px;
    height:2000px;
}


.imagearea {
    max-width: 100%;
    margin:0px auto;

}




</стиль>


                                

                            

                                                    

                                            

                            
Рейтинг:
 0


                            

                                

                                    Member 14890492
                                    
                                

                                

    используйте следующий код ниже для изображения баннера html - проекта.

<img src="header.jpg" style="высота:50%; ширина:100%"/>