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.
Related
I'm trying to get a layout similar to Pinterst. So far I have images that are randomly generated in php between like 125px and 400px.
This did not result in a Pinterest-like effect, where the right aspect-ratios seem to be dynamic. Does anyone know how Pinterest dynamically generates the height of their images?
<div class="pin_image">
<a href="<?php the_permalink(); ?>"><img width="191" height="auto" class="<?php echo $img_class; ?>"
src="<?php echo PricerrTheme_get_first_post_image(get_the_ID(),102,72); ?>" /></a>
</div>
They base the image width on the column width. So for example, if their columns are 200px wide, and the original image is 600px height and 400px width, they would scale the image by half to get it to fit the column width. So 600px * 0.5 = 300px height, and 400px * 0.5 = 200px width. By multiplying both dimensions by the same percent, you maintain the aspect ratio.
You need something like Isotope or Masonry
It doesn't change image height but it reorders the layout in a pleasant way.
When you resize the images, you need to do this based on the WIDTH of the image. As what you want is a fix with and a popotionate height.
For example if you have an image which is 1000 by 2000 and if your column is 100px, you need to resize it to 100 by 200. (i.e. calculate the ratio for width and apply the same to height)
You just need to set the width on the tag to that of the width of the column. The aspect ratio of the image will be kept and the height will be set accordingly.
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
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
hy,
Let's say I want to convert an image to an exact size, eg: 400x300. The trick is, if the image, due to its aspect ratio, does not fit in 400x300, then place it in there with black borders.
A 900x1200 image would be converted down to 225x300 to retain its aspect ratio, and then given black borders left and right to make it 400x300.
original photo:
|||||||||||||||||||||||
|||||||||||||||||||||||
|||||||||||||||||||||||
|||||||||||||||||||||||
|||||||||||||||||||||||
|||||||||||||||||||||||
|||||||||||||||||||||||
|||||||||||||||||||||||
after resize i want to look something like this:
_______________________
|+++++++++++++++++++++|
|+++++++++++++++++++++|
|+++++++++++++++++++++|
|+++++++||||||||++++++|
|+++++++||||||||++++++|
|+++++++++++++++++++++|
|+++++++++++++++++++++|
|_____________________|
the: "+++++++" i want to be some color, and the "|||||||" are the image, in the middle!
unfortunately i don't have any code yet!
i want something like this:
http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php#x22
thanks
Get familiar with the gd functions, which allow you to manipulate images.
You'll need to read in your image using one of the imagecreatefrom... functions. Then you'll need to create a second image using, for example, imagecreatetruecolor, which you fill with your color of choice. Then you copy the original image into the new image using imagecopyresampled, which allows you to resize it in the process. You'll need to calculate the new size with some simple math beforehand, which functions like getimagesize can help you with.
Alternatively, play around with the ImageMagick class, which is an alternative to gd you may or may not find easier to work with.
Best of luck! :)
Create a div styled to have a black background, and sized at 400x300. Then show your resized image inside that div. You can even include a check to make sure that the image is not the desired aspect before showing the div.
Something like this:
<?
$height-ratio = $height / 300;
$width-ratio = $width / 400;
if ($height-ratio == $width-ratio) {
$ratio = $height-ratio;
} elseif ($height-ratio > $width-ratio) {
$ratio = $height-ratio;
echo "<div class='blackbox'>";
} else {
$ratio = $width-ratio;
echo "<div class='blackbox'>";
}
$newHeight = $height / $ratio;
$newWidth = $width / $ratio;
echo "<img src='".$imgSrc."' height='".$newHeight."' width='".$newWidth."' />";
if ($height-ratio != $width-ratio)
echo "</div>";
?>
With supporting css of:
.blackbox {
text-align: center;
background-color: black;
height: 300px;
width: 400px;
}
I'm a big fan of editing and resizing the pictures in advance to be the size I want rather than setting the width and height when it is rendered. The performance is better and you don't have to worry about how different browsers might handle it differently.
So if you don’t have an image editing program get Paint.net. Free and works well.