center image to the center of div

Question

So let's say i have one div and one image like this

<div id="image_wrapper">
    <img src="image.jpg" />
</div>

Now let's say css is like this:

#image_wrapper{
    width:100px;
    height:120px;
    overflow:hidden;
}
img{
    max-width:100px;
    max-height:120px;
}

Now my image could be any kind of size, and max width or height roles would resize it almost perfectly but i need image to fill image_wrapper completely, now i know it sounds imposible but i saw what facebok did with their image, they simply cuts out the edges and this way makes all image look perfect sized, so how do they do it?

EDIT Javascript or php help is totaly fine as long as it does the job.

Answer 1

If you don't want to go down the js road there's a perfectly simple way to do it with php. I recommend you install phpThumb. It takes care of resizing and filtering images for thumbnails (and other things), which seems like what you are trying to achieve here. You can pass all manner of parameters to the script (see: Demo Page). It has one called zoom-crop (zc), which zooms the image up so it fits inside the size that you've specified, and crops it, inside the centre too. This fits your description perfectly. So just use this URL for when you want the image inside your div.

http://URLTOPHPTHUMB.PHP?src=SOURCEOFYOURIMAGE&w=120&h=100&zc=1

Answer 2

If your #image_wrapper doesn't need to be a specific height or aspect ratio, you can take inspiration from the Responsive Web Design movement and allow the image to scale its width to 100% of its containing element:

Consider this CSS Desk example:

HTML:

<div id="image_wrapper">
    <img src="image.jpg" />
</div>

CSS:

#image_wrapper {
    background-color: #000;
    padding: 5px;
    text-align: center;
    width: 500px;
}

img {
    width: 100%;
}

Trying changing the width of #image_wrapper and notice how the image conforms to the new size.

Answer 3

Use CSS3 background-size together with no-repeat center center (demo).

#image_wrapper {
    height:120px;
    width:100px;
    background:no-repeat center center url(image.png);
    background-size:contain;
}

#image_wrapper > img {
    display:none;
}

If you want to use JavaScript try:

<style>
.image_wrapper {
    height:190px;
    width:1000px;
    border:1px solid;
    background:no-repeat center center;
    background-image:url(science.png);
    background-size:contain;
}
</style>

<script type="text/javascript">

function getStyle(el,cssAttribute){
    if(window.getComputedStyle)
        return window.getComputedStyle(el, "").getPropertyValue(cssAttribute);
    else if(document.getElementById(strID).currentStyle)
        return document.getElementById(strID).currentStyle.getAttribute(cssAttribute,false);
    else
        return el.style.getAttribute(cssAttribute,false);
}

window.addEventListener("DOMContentLoaded",function(){
    var w;
    for(var i = 0; w = document.querySelectorAll(".image_wrapper")[i];++i){
        var backgroundSize = '';
        if(w.firstChild.width < parseInt(getStyle(w,"width")))
            backgroundSize += 'auto ';
        if(w.firstChild.height < parseInt(getStyle(w,"height")))
            backgroundSize += 'auto ';
        if(backgroundSize === '')
            backgroundSize = 'contain';
        w.style.backgroundSize = backgroundSize;
        w.style.backgroundImage = 'url('+w.firstChild.src+')';
        w.firstChild.style.display = 'none';
    }
},true);
</script>

This will change every <div class="image_wrapper"><img src="..."/></div> to a fancy image wrapper.

Answer 4

I can't improve on this answer. In short: use tables.

Answer 5

You cannot accomplish this without javascript/jquery.

http://ditio.net/2010/01/02/jquery-image-resize-plugin/

Update, here is one with an example:

http://webdesignledger.com/tutorials/create-a-resizable-image-grid-with-jquery