Home/ Questions/Q 7029277
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T00:31:03+00:00

So let’s say i have one div and one image like this <div id=image_wrapper>

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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
    • 0