How can I make my script img center in a div

I came up with a little script here from the bits and pieces I found and stitched together, but I need a little help to add an extra function to it,

First of all is what it does for me at the moment:

  • Resizes and crops / mailboxes of the image to completely fill the div which is% height and% width - it keeps doing this whenever and regardless of window size
  • It works continuously when the window is resized.
  • The image fills 100% of the div covers - from left to right and top to bottom.
  • The image is not compressed or stretched - it just gets cropped or overflowed.
  • The image is saved as small as possible, so no matter the size, you can still see either the same sides or the top and bottom images.
  • Everything seems to be fine across IE9, Fire Fox, Oprea, Chrome and Safari over XP and 7

All of these things are very important to me, please don't tell me that all I need is:

<img style="width : 100%;"> 


This is much more. It's not too easy to explain, but check out the demo and drag the corner of the window around and it'll be worth 1000 words ...!

Now what I want to add:

All this, Id like a letter block to focus on the image.

When the div is a very tall portrait or very flat landscape, I just get the top or left side of the image.

Id as the center of the original image will stay in the center of the modified div.

I've tried a few things but drew a blank. I'm sure the script can feed minus-top: or left: into style, but it seems that if I get too many divs in a div, IE doesn't like it, or what am I doing wrong?

The thing is, I don't really know how to deal with this stuff, I just stole the bits and beans and fused them together ...

And finally a demo

And the script:



#imgarea {


<script type="text/javascript">

function resizeImage()
    var window_height = document.body.clientHeight
    var window_width  = document.body.clientWidth
    var image_width   = document.images[0].width
    var image_height  = document.images[0].height
    var area_width    = window_width * 0.7
    var area_height   = window_height * 0.75
    var height_ratio  = image_height / area_height
    var width_ratio   = image_width / area_width

    if (height_ratio > width_ratio)
        document.images[0].style.width  = "100%"
        document.images[0].style.height = "auto"

        document.images[0].style.width  = "auto"
        document.images[0].style.height = "100%"



<body onresize="resizeImage()">
    <div id="imgarea">  
<img onload="resizeImage()" src="f/a.jpg">  


Thanks a lot for that.


source to share

2 answers

I'm not sure if this is what you are looking for, but try this: * upd: wysiwyg doesn't work on comments at the moment, so sorry for the messy code snippets.

1. Place div # imgarea relatively. Then you can put it to the right to replicate your right: 0px declaration. Don't forget to hide the overflow to make sure the letter-filled image parts remain hidden.

#imgarea {
    position: relative;
    width: 70%;
    height: 75%;
    float: right;
    overflow: hidden; 
     top: 25%;


  • Some user agents will add paddings and margins to the body element, thereby preventing the image container from sliding to the right. Reset to get rid of the gaps between the container and the edge of the browser window.

    body {margin: 0; padding: 0; }

  • As for the image itself, place it absolutely.

    img {position: absolute; }

  • And finally javascript. To center the image, you need to calculate what width / height = auto sums up to, and then Reset the left / top attributes accordingly. Your if function needs to be adjusted a bit; leave the variables like:

if (height_ratio > width_ratio) {
    var newWidth, newHeight, newTop;
    newWidth = area_width;
    newHeight = image_height/width_ratio;
    newTop = -(newHeight-area_height)/2;
    document.images[0].style.width  = newWidth;
    document.images[0].style.height = newHeight;
    document.images[0] = newTop;
    document.images[0].style.left = 0;
    var newWidth, newHeight, newLeft;
    newHeight = area_height;
    newWidth = image_width/height_ratio;
    newLeft = -(width-area_width)/2;
    document.images[0].style.width  = newWidth;
    document.images[0].style.height = newHeight;
    document.images[0] = 0;
    document.images[0].style.left = newLeft;


I hope that if this doesn't solve the problem completely, it will at least point you in the right direction. Good luck.



I'm not sure if this will work exactly, but it might start. I had a client request to have the radial gradient fixed to the left and right of the main main section of the website. The page was set up with dynamic width and I had time to get one solid image to work, so I came up with a quick css solution.

#bgHold #gradLeft{
    background:url("../images/gradLeft.png") top center no-repeat;


margin-right is half the width of the content block. So basically, the gradient is fixed on the page from 50% to the right and then pops out 50% of the content box, causing it to line up with the edge of the content. The same idea applies to the other side as well.

Now, with your situation, perhaps you can install right:50%;

and margin-right:

imgWidth / 2?



All Articles