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?
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
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.
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;
}
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>
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