Click here to Skip to main content
15,867,879 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
i am developing a website. i want to set header imge width to 100% of screen.
when i am setting
HTML
<img src="image.jpg" width=100%>
working, but user clicks restore_down button the header image is shrinking, but i need to set the image width as sreen width.
Because all the clients don't have same resolution.

Millions of thanks in advance.....
Posted
Updated 15-Jul-20 9:16am
v2
Comments
[no name] 5-Dec-11 8:16am    
It is not clear. The image is 100% in the browser, even when the browser is resized? If the browser is resized the image can't be the width of the screen because the browser window itself is not.
Madhukar Pallam 5-Dec-11 9:56am    
Thank you Mark Nishalke for your repaly, here my requirement

When browser re-sized the scroll bar should come. but the image width should be same as the screen resolution.... and can you post sample code... i am using JSP.

Thank you..
[no name] 5-Dec-11 11:04am    
Image width can't be the same as the screen width. The web browser application, the window the webpage and image are being displayed in, is not full size. The contents can't exceed the size of the window.
vino2012 5-Dec-11 11:28am    
Please post your header html tags with your css .......................

put your header image as a background for a div or table , td

1. if your image suit for repeat-x property , then it is easy to fix width:100%; for all resolution pc , laptop (including-min height,max width laptop screen) and all device like ipad,ipod,iphone ,etc
This is ur css if image meets repeat x
background:url(----) repeat-x left top;

otherwise option 2

2. if ur image not suit repeat-x , u have to use javascript(j-query) script to make image fit in all browser,os and device.
have to fix like this and jquery is going to play role of finding browser window width and adding corresponding width attribute is added to the image.......

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




I have code if u want reply me.......

 
Share this answer
 
v2
Comments
Madhukar Pallam 5-Dec-11 13:59pm    
Here my code:

<html>
<style type="text/css">
div.header{position: absolute; top: 0px; left:0px; width: 100%}
</style>
<body>
<div class="header">
<img src="Header2.png" style="height:10%; width:100%"/>
</div>
</body>
</html>
</head>
<body>
<html>
<div id="main">
<div class="contentarea">
<div class="imagearea">
<div align="center"><"/*image location*/" width=100% height="360px"></div>
</div>
</div>
</div>

</body>
</html>


<style>
CSS
/* 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;
}

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

}


</style>
 
Share this answer
 
<html>
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var contWidth=120;
var contHeight=83;
var bgOrigWidth=1280;
var bgOrigHeight=632;
$(document).ready(function() {

resize();

$(window).bind('resize', function(){resize();});

});




function resize()
{

var myWidth;
var myHeight;

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

//Non-IE

myWidth = window.innerWidth;
myHeight = window.innerHeight;


} else if( document.documentElement &&

( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {

//IE 6+ in 'standards compliant mode'

myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;

} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {

//IE 4 compatible

myWidth = document.body.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;

}else{
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";

var imgArr=$("#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">


body
{
padding:0px;
margin:0px;
}
html
{
overflow:hidden;
}


</style>
</head>
<body>

<div style="overflow:hidden;">

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

</div>

</body></html>
HTML


 
Share this answer
 
v4
Comments
vino2012 6-Dec-11 12:00pm    
If u need only width , then comment all height related codes on the above code....................
[no name] 6-Dec-11 15:25pm    
Format your code snippets
vino2012 7-Dec-11 4:11am    
can't understand............
[no name] 7-Dec-11 10:42am    
Then let me speak loader.
FORMAT YOUR CODE SNIPPETS WHEN POSTING.
What part of this don't you understand?
vino2012 7-Dec-11 14:04pm    
In solution text box - tool bar -code- what i have to select for formatting ?
use the following code below for html project banner image.
<img src="header.jpg" style="height:50%; width:100%"/>
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900