Resizing the image in php for viewing purposes only

Question

Okay, the reason I posted this is because I wasn\'t sure what to search for. I\'ll try to explain it as clearly as I can.

Say, I have an image sized 800x600. The box

Answer 1

You load the image, resize it first so that it has the minimum side being 150, then you crop to the 150 width/height relative to the center. Then you just output your image:

WideImage::load('yourfile.png/jpg/...')
    ->resize(150, 150, 'outside', 'any')
    ->crop('center', 'center', 150, 150)
    ->output('png');

You find the sourcecode, documentation, online demos and the API documentation here: WideImage.

Let me know if you've still got questions.

Answer 2

It is very easy to use here is the class https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/timthumb/timthumb.php here are the params http://viralpatel.net/blogs/resize-image-dynamically-php/ I have tested looks works great

example is < img src="/script/timthumb.php?src=/some/path/myimage.png&w=100&h=80" alt="resized image" />

Remember that you should be careful to use this, If you do not create regex validation for input params you may have security vulnerability. That's why they deprecated this lib, but it works perfect.

Answer 3

you can do this with jquery. i assume you have a classname for the images that you want to show cropped. for example it might be ".cropmyimage", here's the code:

var objheight = 150;
var objwidth = 150;
$(".cropmyimage").each(function(){      
    var elem = $(this);
    elem.wrap("<div class='cropperdiv'></div>");
    var t = new Image();        
    t.src = elem.attr("src");
    t.onload = function(){      
        var ratio1 = objwidth/objheight; 
        var ratio2 = t.width/t.height;          
        var newheight=0;
        var newwidth=0;
        if(ratio1 < ratio2){
            newheight = parseInt(objheight);
            newwidth = parseInt(objheight * ratio2);                        
        }else{
            newheight = parseInt(objwidth / ratio2);
            newwidth = "width",objwidth;        
        }                   
        elem.width(newwidth).height(newheight).css("margin-left",(objwidth-newwidth)/2).css("margin-top",(objheight-newheight)/2);          
    }
    elem.parent("div.cropperdiv").css("overflow","hidden").width(objwidth).height(objheight);
});

Answer 4

I would store the thumbnails so that you only have to do it once and they can be cached. If your aspect ratio is fixed, I would scale them down to fit in a 200x200 box (there are some php answers here about that so I'll skip it). If the aspect ratio varies, I would use a safe value so that it always covers your 150x150 box (like 300x300).

Then I would set the thumbnail image as a background image for the image box in css and you get exactly the effect you want:

.img_box {
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(/path/to/image);
}

To enhance the experience for css3 capable browsers you can set:

background-size: cover;

to the box so that it fits exactly (maintaining aspect ratio).

Answer 5

just use <img src='source' width="150" height="150" /> it will resize image. though it will not preferable because it cause burden on browser.

Answer 6

As a few have mentioned, this can be done with CSS if you're not saving the image. Although load times will be hurt (downloading a 800x600 image vs downloading a 150x150 image).

HTML:

<div class="imgHold">
     <img src="imgSrc.jpg" />
</div>

CSS:

div{
     overflow:hidden;
}
img{
    width:150px;
    height:200px;
    margin-top:-25px;
}