Resize image and Fill background on Wordpress - php

Question

i have image with various size. and i also have various container to place those image.
example : i have 680 x 1024 image that will placed on 500x500 container without cropping.
so i thought that i will need to build image with container size, than put resized image on top of it.
result that i expected is something like this
or this
how the best way to achieve this on PHP or wordpress?

Answer 1

I wrote a plugin, currently at WordPress plugin repository:
JResizr
This plugin have ability to override default worpdress behavior and disable croping image but try to resize image to fit rectangle container size and fill space with background color. You also able to choose background color to use.

Answer 2

There are several ways to accomplish this. One alternative to javascript/php, if the images are roughly the right size, is just use CSS, specifically background-size: contain
contain
This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.
You can experiment with it at http://jsfiddle.net/RxTLS/
Keep in mind this is mostly supported, although IE8 and below do not. I believe there are some polyfills our there though if you're worried about IE users.
This solution is only ideal if the images you are uploading are close to the size they will be displayed however. Trying to do this with images that are over 3000 pixels wide/tall is not advised for several different reasons.
In that case, you'd want to shrink them in PHP first. If you're uploading the images through Wordpress then you can use add_image_size in your functions.php and the images will be automatically resized when you upload them. Alternatively, you can do it manually in PHP as well and there are plenty of tutorials on how to do that out there. I'd just google PHP image resize.

Answer 3

In your html where you have <img> tag, add a width attribute, and set it to 100% that should auto resize your image to its containers size
<img src="imageNamw.jpg" alt="imageAlt" width="100%" />

Answer 4

You could write a simple Js file that would accomplish that.
I have done such thing before; So basically you compare the height and the width of the image in its container. then if the height is longer than the width you set the height to 500px and set the width to auto;
else if the width is longer than the height you set the width to 500px and the height to auto;
else you set the width and the height to 500px;
set the container vertical align to middle and text-align to center in css and that should do the trick;

Answer 5

You can also try a simple timthumb library to resize images in any size.
Please check the timthumb library code here :
http://timthumb.googlecode.com/svn/trunk/timthumb.php

Answer 6

In WordPress it would be simply by using their image_resize function
image_resize( $file, $max_w, $max_h, $crop, $suffix, $dest_path, $jpeg_quality );
where you would set the file, width of the container, height of the container and false (as you want to resize, not crop). The others are optional and you should fill them if you have special needs for the new file destination or name or quality. If you entered everything correctly, the function should return path to your newly resized image.
Note that with WordPress you can actually do this automatically when uploading pics so then later you just retrive the already resized picture - take a look at add_image_size function.