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.

score 4 · Answer 1 · answered Jan 09 '12 at 23:01

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.

@Linas - Then do this but use your height/width in your CSS. It still works. — Rob, Jan 10 '12 at 01:13

Zeta · Answer 2 · 2012-01-10T01:19:10.660

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.

score 0 · Answer 3 · edited May 23 '17 at 10:34

0

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

edited May 23 '17 at 10:34

Community

1
1

answered Jan 09 '12 at 22:46

drfloob

3,154
1
24
31

I can't think of a worse idea. – Rob Jan 10 '12 at 01:14
@Rob: Then you are a zealot. Pragmatism loves tables. – drfloob Jan 10 '12 at 03:14
No. I just know what I'm doing. – Rob Jan 10 '12 at 04:03
Tables is so 90's, adapt to change! – Simon Hayter Dec 15 '12 at 03:12

score 0 · Accepted Answer · answered Jan 09 '12 at 23:14

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

score -1 · Answer 5 · answered Jan 09 '12 at 22:44

-1

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

answered Jan 09 '12 at 22:44

evasilchenko

1,862
1
13
26

center image to the center of div

5 Answers5

Linked