Home/ Questions/Q 6668633
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T03:03:44+00:00

I’ve tried many different things but none is working. I have a picture (let

  • 0

I’ve tried many different things but none is working.

I have a picture (let say unknown height and width) and I want it centered (vertically and horizontally). The height and width is determined by the window size, but must not be more than the original height and/or width.

As an exemple, you can look at Windows Live Photo Gallery, when you double click on a picture. This is exactly what I need, in css/jquery. I don’t know how to adjust the image to fit as I want in the page.

Thanks for any help.

I don’t know the specific term since english is not my native language.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you know your image’s size before hand (on the server side), the easiest way is to do it when rendering the HTML; use the width and height attribute of your <img> tag to set its size, and it’s margin-left and margin-top to center it into a container. This will make it a lot better for the end user as he won’t see the screen flicker when re-sized javascript side after the image is loaded. This is by far the best way to do this.

    Edit: as stated in the comments, if you use the server side solution you might want to still use a javascript solution on $(window).resize(), so that the image stays centered and properly sized if the user change the window’s dimensions.

    —

    However, since your question is for javascript, you need to work in two steps; first reduce the image height and width so as not to be larger than the window while keeping ratio, then in a second time apply some margin to center it both horizontally and vertically.

    Here is an example of how you could achieve what you want, note that this code is clearly not optimized and probably shouldn’t be used as-is, I leave it in its “verbose” way to keep it easier to understand.

    The HTML:

    <body>
  <div id="main" style="margin: 0; padding: 0">
    <img id="yourpic" src="http://domain.com/image.png" />
  </div>
</body>

    The JS:

    // we use the onLoad event so that your browser know the image dimension
$('#yourpic').load(function() {
    // cache your objects
    var $window = $(window);
    var $this = $(this);

    var tmp;

    // if the image has too much width reduce it, keeping its ratio
    if ($window.width() < this.width) {
        tmp = [this.width, this.height];
        $this.width($window.width());
        $this.height(tmp[1] / (tmp[0] / this.width));
    }

    // same for its height
    if ($window.height() < this.height) {
        tmp = [this.height, this.width];
        $this.height($window.height());
        $this.width(tmp[1] / (tmp[0] / this.height));
    }

    // now center it horizontally
    if ($window.width() > this.width) {
        $this.css('margin-left', ($window.width() - this.width) / 2);
    }

    // and vertically
    if ($window.height() > this.height) {
        $this.css('margin-top', ($window.height() - this.height) / 2);
    }
});

    You can see it in example here: http://jsfiddle.net/RPCjE/2/ (chome img.onload event is quite buggy so if you are using this browser you might have to refresh with no cache).

    • 0