Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: CSS HTML JSP
i am developing a website. i want to set header imge width to 100% of screen.
when i am setting
<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 5-Dec-11 1:48am
Edited 7-Dec-11 0:05am
v2
Comments
Mark Nischalke at 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 at 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..
Mark Nischalke at 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.
vino12345 at 5-Dec-11 11:28am
   
Please post your header html tags with your css .......................
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

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.......
  Permalink  
v2
Comments
Madhukar Pallam at 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>
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 4

</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 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;
 
}
 
</style>
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

<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>
  Permalink  
v4
Comments
vino12345 at 6-Dec-11 12:00pm
   
If u need only width , then comment all height related codes on the above code....................
Mark Nischalke at 6-Dec-11 15:25pm
   
Format your code snippets
vino12345 at 7-Dec-11 4:11am
   
can't understand............
Mark Nischalke at 7-Dec-11 10:42am
   
Then let me speak loader.
FORMAT YOUR CODE SNIPPETS WHEN POSTING.
What part of this don't you understand?
vino12345 at 7-Dec-11 14:04pm
   
In solution text box - tool bar -code- what i have to select for formatting ?

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

  Print Answers RSS
0 OriginalGriff 436
1 Maciej Los 249
2 BillWoodruff 199
3 /\jmot 180
4 Suraj Sahoo | Coding Passion 170
0 OriginalGriff 8,484
1 Sergey Alexandrovich Kryukov 7,407
2 DamithSL 5,639
3 Maciej Los 5,159
4 Manas Bhardwaj 4,986


Advertise | Privacy | Mobile
Web01 | 2.8.1411023.1 | Last Updated 4 Mar 2014
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100