PHP Image resizing before uploading in the specified Directory

Question

Hi I'm developing a site wherein a user can upload his/her profile picture. My upload page has an img tag so that a user can preview what their image would look like before they upload it after they have selected this picture the thing is the image's name would be fetched from the database later on. here is my the snippet for it

 <img id="imgs" src="http://placehold.it/200x200" alt="your image"/>

my uploader goes something like this

if ( !!$_FILES['file']['tmp_name'] ) // is the file uploaded yet?
{
    $info = explode('.', strtolower( $_FILES['file']['name']) ); // whats the extension of the file
    $temp = explode(".",$_FILES["file"]["name"]);
    $filename = rand(1,9999) . '.' .end($temp);
    if ( in_array( end($info), $allow) ) // is this file allowed
    {
        if ( move_uploaded_file( $_FILES['file']['tmp_name'], $todir .  $filename ) )
        {

        }
    }
    else
    { }
}

by the way this uploader script is from a tutorial so yeah you might find several security and other issues here..

What I'm having trouble is the image looks fine when I uploaded an image with a dimension of 200x200 because in my css I have defined imgs with a width and height set both at 200px but if I uploaded other images that doesnt meet the the width and height that I have set on my css the image turns into stretched if its bigger

Any ideas out there how can I fix this? I also tried defining sizes on the img directly and turned out the same obviously can I fix this with just css alone?

Are you looking for a CSS fix to the img tag? If so, #imgs { width:200px, height:200px; } or — Drakes, Mar 30 '15 at 00:32
You could use a div, instead of img, with a background image with no-repeat and contain or cover for background size. It's a little inefficient because the user may upload a super large file so it makes for slower loading. — Rasclatt, Mar 30 '15 at 00:34
as much as possible I want to avoid on-site cropping which is why I didnt consider using jquery *fyi* guys.. but if there really is no other way I might go for that though.. :( — Kim Oliveros, Mar 30 '15 at 00:35
This is just pure css my friend. Other options are server side cropping, but that involves more work. Please advise. — Drakes, Mar 30 '15 at 00:36
@Rasclatt I also want to avoid that are there fallbacks for that? — Kim Oliveros, Mar 30 '15 at 00:36
The only downside is the fact that someone could upload a big file, but if you don't care about that using contain or cover will keep proportions but fit inside a 200px x 200px without stretching. — Rasclatt, Mar 30 '15 at 00:40
Hmm I think I'll give it a test on both your advice guys.. I'll keep you updated thanks for the feedback :) — Kim Oliveros, Mar 30 '15 at 00:44
You could implement a PHP script that resizes their image, previews it exactly as it would go in the database, and if they accept, it could save to the DB. Are you looking for a solution along these lines? — Drakes, Mar 30 '15 at 01:05

score 2 · Answer 1 · answered Mar 30 '15 at 00:42

2

If you want to rely only on CSS for resizing don't use width and height but max-width and max-height. Example (untested):

.my-img {
    max-width: 200px;
    max-height: 200px;   
}

This way you should be able to preserve the width/height ratio.

answered Mar 30 '15 at 00:42

tacone

11,371
8
43
60

what happens if the image is smaller than the img/div? will it follow the img/div tag or will the image remain small but the img/div tag will follow that image and will distort my current design? – Kim Oliveros Mar 30 '15 at 00:48
It will remain small. The good news is you can use width or height, but just one of them. The other should be a max-*. That way you can enforce a width OR height and have the other be adjusted automatically for you. – tacone Mar 30 '15 at 00:50
hmm I'm not sure I understand sorry do you mean it like this? `#imgs{ max-width :200px; height:100% };` – Kim Oliveros Mar 30 '15 at 00:53
I see Ok I'll try this one :) – Kim Oliveros Mar 30 '15 at 00:54

score 2 · Answer 2 · answered Mar 30 '15 at 00:48

2

I would add to what tacone has commented.You should do it like this.

img#imgs {
        height: 100%;
        max-height: 200px;             
        width: 100%;
        max-width: 200px;

}

answered Mar 30 '15 at 00:48

rashidkhan

462
8
24

@kim If the image is smaller than the div/img then the div will shrink to that image size. – rashidkhan Mar 30 '15 at 00:51
so should I add an outer div for the img tag? just so that the 200x200 dimension could be preserved? – Kim Oliveros Mar 30 '15 at 00:54
@KimOliveros if you want to preserve the 200x200 space in all cases then it should be something like this. .container { width: 200px; height: 200px; } .container img { max-width: 200px; max-height: 200px; width: 100%; height: 100%; } – rashidkhan Mar 30 '15 at 01:04

score 1 · Accepted Answer · edited May 23 '17 at 12:32

1

Here is a simple tutorial about image resizing at https://phpmatters.com/resize-image-using-php/

Here is a sample snippet of how you could resize your user images. There are several intelligent options. PHP resizing is smarter than allowing users to insert huge images in the HTML page (the CSS-only sizing method).

For example, if you want to resize to a specifed width (e.g. 200px) but keep the dimensions ratio the same then the script can work out the required height for you, just use the resizeToWidth function.

<?php
    include('SimpleImage.php');
    $image = new SimpleImage();
    $image->load('picture.jpg');
    $image->resizeToWidth(200);
    $image->save('picture200x200.jpg');
?>

On the PHP size, you can also reject images smaller than 200x200 so you don't have to worry about unacceptably small images being saved.

...this plugin is no longer supported due to security exploits

FWIW, if you have access to the .htaccess file on your server, adding this will deny external access to your timthumb.php. It's such a great library if used internally.

# Prevent 'timthumb' hack attempt
RewriteRule ^(.*)?(timthumb\.php)$ - [F]

EDIT: An alternative library to TimThumb is the WideImage library that has many features at http://wideimage.sourceforge.net/examples/resizing/

Here is a thread on SO about using it here: Keeping aspect ration when resizing images using WideImage PHP library

edited May 23 '17 at 12:32

Community

1
1

answered Mar 30 '15 at 01:17

Drakes

23,254
3
51
94

The tutorial and the actual snippet is pretty simple to understand but it says there that this plugin is no longer supported due to security exploits. but I guess I could try to look for a plugin similar to this line – Kim Oliveros Mar 30 '15 at 01:30
There was a wordpress hack involving TimThumb, but it was do to how it was implemented. In simple cases like the above code it is not usually a problem. However, there is an alternative: http://wideimage.sourceforge.net/examples/resizing/ and a demo http://wideimage.sourceforge.net/wp-content/current/demo/?demo=resize – Drakes Mar 30 '15 at 01:35
I see thanks I'll try out then thanks will update you as soon as I can :) – Kim Oliveros Mar 30 '15 at 01:48
TimThumb is excellent and easy to use internally. I updated my answer to reflect a tweak you can do to prevent external access to that script. I still use it as it's so convenient. – Drakes Mar 30 '15 at 11:03
sorry went on a holiday so yeah I wasnt able to get back to you yes so far its working just trying to find out if there are any side issues I have used the timthumbs btw.. :D – Kim Oliveros Apr 05 '15 at 22:47

score 1 · Answer 4 · edited May 23 '17 at 11:54

Here are a couple alternates to other answers.

One option is to physically modify the image. Here is a working GDLib image resize/crop that will resize the image as well as crop:

Crop/Resize Image Function using GD Library

Another option is to do a <div> you can use a combination of header css and inline css:

<style>
div#img {
    /* don't repeat background */
    background-repeat: no-repeat;
    /* "cover" will force the image to flood the background */
    /* based on smaller dimension */
    background-size: cover;
    height: 200px;
    width: 200px;
    display: inline-block;
}
</style>

<div id="img" style="background-image: url('http://placehold.it/200x200.jpg');"></div>

score 0 · Answer 5 · answered Mar 21 '17 at 13:54

This should keep the height you want and proper aspect ratio.Any sized image will not grow past the predefined 200 X 400 set in the CSS.

CSS:
body{margin: 0;padding:0;}
#styled>div{
    position:relative;
    margin: 0 auto;
    max-width:400px;
    background: #333;
    text-align:center;
    border:1px solid lime;
    }
#styled>div>img{
    max-height:200px;
    }
#not-styled>div{
    position:relative;
    margin: 0 auto;
    background: #333;
    text-align:center;
    border:1px solid blue;
    }



 HTML:
<div id="styled">
        <div><img src="path/to/your/image.png" alt="" /><p>img size: 250x250</p></div>
        <div><img src="path/to/your/image2.png" alt="" /><p>img size: 850x500</p></div>
    </div>
    <div id="not-styled">
        <p>NOT styled</p>
        <div><img src="path/to/your/image.png" alt="" /><p>img size: 250x250</p></div>
        <div><img src="path/to/your/image2.png" alt="" /><p>img size: 850x500</p></div>
    </div>

You can see an example at webbdesign.ca/photo_aspect_example.html

PHP Image resizing before uploading in the specified Directory

5 Answers5