[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 262
  • Last Modified:

how can i set an image wich automaticly redimensioning at web page

hi

i have a web page, i need to set it with lateral spaces, and an image at center redimensined

cause, i set it , but it lose some part of the image

i need image automaticly redimension to show it right

i attach a screen web actually showed , and image full, and html

someone could help me please
web-page-actualli-showed.jpg
index2012n.html
portadan.jpg
0
tenriquez199
Asked:
tenriquez199
  • 2
1 Solution
 
Scott Fell, EE MVEDeveloperCommented:
Browsers may not resize the image very well.    The best thing to do is size your image at 100%.   If this is going on the background inside of your container I would do something like this.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
#container {
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	background-attachment: fixed;
	background-image: url(http://www.mysite.com/image.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
</style>
</head>

<body>
<div id="container">

</div>
</body>
</html>

Open in new window

0
 
RoonaanCommented:
With a combination of CSS and some fallback javascript for IE9 and lower, you can have a more or less working solution, using the following example code.
<html>
   <head>
     <script type="text/javascript">
	function IEgetSize(prop) {
		var ratioW = Math.min(1, document.body.clientWidth / 2320), w = 2320;
                var ratioH = Math.min(1, document.body.clientHeight / 1552), h = 1552;
		if (ratioW > ratioH) {
			h = h * ratioH;
			w = w * ratioH;
		} else {
			h = h * ratioW;
			w = w * ratioW;
		}
		if ( prop == "h") {
			return Math.round(h) + "px";
		} else {
			return Math.round(w) + "px";
		}
        }
     </script>
     <style type="text/css">
	* html #myImage { 
	   width: expression( IEgetSize('w') ); /* sets max-width for IE */
	   height: expression( IEgetSize('h') ); /* sets max-height for IE */
	}
	#myImage {
           margin: 0 auto;
           max-height: 100%;
           max-width: 100%;
        }
     </style>
   </head>
   <body>
     <div style="text-align:center">
     <img src="http://filedb.experts-exchange.com/incoming/2012/08_w34/597413/portadan.jpg" id="myImage" />
     </div>
   </body>
</html>

Open in new window

0
 
tenriquez199Author Commented:
hi Roonan

wonderfull

it run fine

i have a dude only

you know why have spaces at top and bottom ?

thanks Roonan really look excelente

only that 2 details

the url is www.terrazasixmiquilpan.com.mx/indexv4.html
indexv4.jpg
indexv4.html
0
 
tenriquez199Author Commented:
Hi Roonaan

you know why with IE8 on windows xp stay unloading image?

i reset my computer, an d still this issuue

it only worong with this computer with windows xp and IE8

it dont do it with IE9, or other browser

only has that isuee with that configuration

you know some about?

thanks a lot
ie-8-windows-xp-fail.jpg
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now