CODEWITHSUNDEEP
htmlcss
Jason
Jason

Reputation: 3

Auto Resizing images to fit to browser (css Html)

Im having a problm getting my page to resize and scale correctly. Basicaly, the site will be opened in browsers, and tablets, on mobiles occasionaly. heres a snippet of the code :

<style type="text/css">
div#container
{
position:relative;
width: 1439px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align:left; 
}
body {text-align:center;margin:0}
</style>

</head>
<body>
<div id="container">
<div id="g_image1" style="position:absolute; overflow:hidden;
left:0px;  top:8px; width:1318px; height:88px; 
z-index:0"><img src="images/LogoHeader.jpg" alt="" title="" border=0 
width=1318 height=88></div>

<div id="image2" style="position:absolute; overflow:hidden; left:81px;
top:100px; width:1317px; height:572px; z-index:1"><img 
src="images/TitlePicAerialSurveys.jpg" alt="" title="" border=0 
width=1317 height=572></div>

for example, image2 wont auto resize to the window size. is there a way to change the code to affect all images or should i do each image at a time with a auto resize code?

Upvotes: 0

Views: 169

Answers (3)

Naugrim.
Naugrim.

Reputation: 150

You must manually add size for each of your window size (window, tablet, mobile). This current image behaviour is normal.

Add a specific image size in css for each @media.

My example : 

@media screen and (max-width: 1280px) { 
  .imgClassResize { 
     width : yoursize
   } 
}

@media screen and (max-width: 1024px) { 
  .imgClassResize { 
     width : yoursize
   } 
}

Upvotes: 1

Arun Thomas
Arun Thomas

Reputation: 845

Why not try jQuery

suppose for the image

<img id="img" src="images/image.jpg">

use the below code to set the width to 100%

var w = innerWidth;
$('#img').css({"width":w});

if you don't want to use js, then you will need to set the width in percentage

#img{
    width:100%;
}

Upvotes: 0

Deepak Tripathi
Deepak Tripathi

Reputation: 630

The height and width can be set to auto (this is default. Means that the browser calculates the height and width), or be specified in length values, like px, cm, etc., or in percent (%) of the containing block.

In your case percent (%) will do the job. You can also use media queries for better structuring of your page on different devices.

Upvotes: 1

Related Questions