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

Posted on 2012-08-19
Last Modified: 2012-10-25

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
Question by:tenriquez199
    LVL 52

    Expert Comment

    by:Scott Fell, EE MVE
    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.

    <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(;
    	background-repeat: no-repeat;
    	background-position: center top;
    <div id="container">

    Open in new window

    LVL 49

    Accepted Solution

    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.
         <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";
         <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%;
         <div style="text-align:center">
         <img src="" id="myImage" />

    Open in new window

    LVL 1

    Author Comment

    hi Roonan


    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
    LVL 1

    Author Comment

    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

    Featured Post

    Courses: Start Training Online With Pros, Today

    Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

    Join & Write a Comment

    JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
    In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

    755 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    23 Experts available now in Live!

    Get 1:1 Help Now