So I am making a website and a part of it has where users can make a post and put an image. When a user uploads the photo I want it to resize it smaller to fit the post size. The problem is some users will be uploading in landscape and others in portrait. I also won't know the aspect ratio(3:4, 16:9). How can I go about setting my website up for this? I know how to resize images but should I resize only the width and keep the height in ratio? and how can I set up my dynamic html?
So here is something similar to what I am doing...http://fiverr.com/.
They have a similar post set-up. When I mess with their images width all it does is stretch it in place. Also it seems like they have no pictures that are in portrait view. can someone explain this because i doubt NOONE uploaded a portrait image
old_height
new_height= ---------- * new_width
old_width
= aspect * new_width
You have to compare the image's aspect ratio with your viewport's before deciding whether to resize by width or height.
If your image display area is viewport_w x viewport_h and uploaded image is w x h, then (pseudo-code):
viewport_aspect_ratio = viewport_w / viewport_h;
image_aspect_ratio = w / h;
if (image_aspect_ratio > viewport_aspect_ratio) {
// image aspect ratio is wider than our viewport
// resize to fit viewport width
new_w = viewport_w;
new_h = image_h * viewport_w / image_w;
} else {
// image aspect ratio is taller than our viewport
// resize to fit viewport height
new_w = image_w * viewport_h / image_h;
new_h = viewport_h;
}
// resize image to new_w x new_h
Related
How I can resize an image with code in word press with perfect height and width given by me?
if (function_exists('add_image_size')) {
add_image_size('homepage-thumb',280,300);
}
I tried this code, it works but width is changed as per height. How I can resize the image perfectly with my height and width without cropping it?
The function add_image_size() has a 3rd param. Specify true for cropping (default false).
Or maybe u call an other size of your picture.
I am creating a image editing tool using HTML 5 Canvas & Java script. I am loading large image to canvas by scaling an image to fit the canvas, apply some filters, and save back image to disk.
The problem is when I save a canvas to image it will store image with canvas size. What I want is image will be stored to its actual dimensions with applied filters. The Same approach used by Flickr.
For Example
if the image is 1000px X 1000px and displayed in a 300px X 300px canvas, I am loading image to canvas as 300px X 300px. while saving I still want to save the image with 1000px X 1000px dimesnion. How to do that?
I am developing using php, HTML5 & Javascript.
I want to do everything on client side, before sending an image to server
Any Help?
looking for a proper solution
Found it.
Just need to change canvas size by using css & tag attribute
CSS width & height adjust display area of canvas
Tag width & height are actual image width & height
For example:
#canvas { width:500px; height:350px}
<canvas id="canvas" width="1024" height="760"></canvas>
Above will display canvas with block of 500px x 350px.
However when canvas saved to image it will saved with image size 1024x760
use this link. It is having full tutorial.
http://www.sitepoint.com/image-resizing-php/
in this image's dimension will change accordingly.
UPDATE
For client side
http://ericjuden.com/2009/07/jquery-image-resize/
$(document).ready(function() {
$('.story-small img').each(function() {
var maxWidth = 100; // Max width for the image
var maxHeight = 100; // Max height for the image
var ratio = 0; // Used for aspect ratio
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if the current width is larger than the max
if(width > maxWidth){
ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
width = width * ratio; // Reset width to match scaled image
}
// Check if current height is larger than max
if(height > maxHeight){
ratio = maxHeight / height; // get ratio for scaling image
$(this).css("height", maxHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
width = width * ratio; // Reset width to match scaled image
}
});
});
I have a script the retrieves remote images from various URLs. The width and height are unknown variables.
I have them displaying on my page and I'm reducing the height to 55px for each. However, the images that are very wide (banners, etc.) are displaying at their full width.
I can't constrain the width and height because I'll distort the image. Does anyone know a creative solution that will proportionally scale these images so they don't exceed 55px(h) AND 75px(w)?
p.s. I've tried getimagessize() in php, but the functions takes way too long to complete
Thanks!
I had a similar problem but I was using jQuery. But I think you can use the same logic in php to calculate the image size.
var maxWidth = 75; // Max width for the image
var maxHeight = 77; // Max height for the image
var ratio = 0; // Used for aspect ratio
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if the current width is larger than the max
if(width > maxWidth){
ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
width = width * ratio; // Reset width to match scaled image
}
// Check if current height is larger than max
if(height > maxHeight){
ratio = maxHeight / height; // get ratio for scaling image
$(this).css("height", maxHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
width = width * ratio; // Reset width to match scaled image
}
Hope this is of any help.
Bah I just realized I brain farted, unknown image size. Disregard the whole thing
and hey you could always use css to do that! like this answer explains, but you'll have avoid supporting ie6 and maybe ie7 for this feature (you could use conditional comments for resizing with javascript or serverside php script in this scenario)
by the way the above answer does work! but you should add the img programtically and the get the image height and width straight from the object like this and then run the resize function above:
var rimg = new Image();
rimg.src = "yourimageserverurl";
var original_height = rimg.height;
var original_width = rimg.width;
start the resize function on rimg..
I'm using a BB code function to allow members to post images and such in comments and topics. My problem is if an image is too big to fit the table, it expands everything past the width.
Are there any workarounds for this? Either in the table or the td? A predefined width and height for the image won't work because I'll never know how big each image is. Is there a way to make a max width/height for the image or something along those lines?
Here's a bit of code you can run to force a maximum width if the images are being stored on your server:
$maxWidth = 450;
$info = getimagesize("../path/to/image.jpg");
if( $info[0] > $maxWidth )
{
print '<img src="../path/to/image.jpg" width="' . $maxWidth . '" />';
}
else
{
print '<img src="../path/to/image.jpg" />';
}
The height will scale to the width, so nothing gets too stretched out.
Edit:
If you want to actually resize the images on your server, I have a PHP library that might be of help to you, found on my github, here.
If you want to do it all clientside, without storing the image locally, you should be able to create a new Javascript Image(), set the src to the image and then determine the width and height of the image through Javascript's built-in methods. You could then dynamically alter the width/height of the <img> element to be no larger than your pre-determined width/height.
Set the TD a max height or width and set the img to 100% width/height
I'm listing photos using MySQL:
<?php
$a = mysql_query("select * from x");
?>
<?php while ($w=mysql_fetch_array($a)) { ?>
<img src="<?=$w[url]?>" alt="<?=$w[name]?>" width="150" height="110" />
<? } ?>
How can I can maintain the aspect ratio? An image with dimensions of 150x500 pixels becomes very distorted. How can I fix this?
Just specifying width-only or height-only in the HTML will keep the ratio.
Or you can actually resize your photos dynamically with a script like the Smart Image resizer: http://shiftingpixel.com/2008/03/03/smart-image-resizer/
you can get the image size using php:
list($width, $height) = getimagesize($file);
Try something like this:
$ratio = $height / $width;
$new_width = 150;
$new_height = $ratio * $new_width;
Just specify one dimension (either the width or the height but not both) and it will keep the ratio. With CSS you could also specify just the maximum width and maximum height:
<img src="<?=$w[url]?>" alt="<?=$w[name]?>" style="max-width:150px; max-height:110px" />
If you just specify a width, all browsers (that I know of...) will scale the image correctly.
However, you might want to consider making thumbnails if you´re going to load a lot of images.
Setting both the width and height of an forces the browser to rezise it to match what you tell it to.
Setting only one (either width or height) resizes it so that the image's ration is kept.
You can use the PHP function getImageSize to get the image's actual width and height, and then rerform a proportional resize based on height / width = new_width / new_height
You could use a resize script to resample (resize) the image.
A good script is located here:
http://shiftingpixel.com/2008/03/03/smart-image-resizer/
To use:
<img src="/image.php?image=/img/test.jpg&width=150&height=500" alt="Test" />
I you plan to always use this height/width you could insert the resampled image directly in the database. This way you won't waste space on your server. If you plan to use many height/width or change these sizes in the future, you should keep the originals as you do now.