Avoid stretching photos

How can I avoid the stretching of my photos? PHP selects 2 photos at random from a folder and displays them using echo. But right now, all photos in portrait, are stretched.

<?php if(!empty($images)) {
    $rand_key = array_ra开发者_开发知识库nd($images, 1);
    $src = $images[$rand_key];
    echo "<img class=\"flickrphoto\" src='".$src."' align='absmiddle'>";

    unset($images[$rand_key]);
    $rand_key = array_rand($images, 1);
    $src = $images[$rand_key];
    echo "<img class=\"flickrphoto\" src='".$src."' align='absmiddle'>";
} else {
    echo 'Error';
} ?>

And the CSS:

.flickrphoto {
    max-width: 100px;
    max-height: 100px;
    overflow: hidden;
}

** EDIT **

Current code:

   // protrait calculations;
    $size = getimagesize($images_folder_path);
    if($size[0] < $size[1]) {
        $orientation = 'portrait';
    } else {
        $orientation = 'landscape';
    }

---

I'd just check if the orientation is protrait or not and add a css class;

<?php if(!empty($images)) {
$rand_key = array_rand($images, 1);
$src = $images[$rand_key];

// protrait calculations;
$fullpath = // statement to fetch the path on the server
$size = getimagesize($fullpath);
if($size[0] < $size[1]) {
   $orientation = 'portrait';
} else {
   $orientation = 'landscape';
}

echo "<img class=\"flickrphoto ". $orientation ."\" src='".$src."' align='absmiddle'>";

unset($images[$rand_key]);
$rand_key = array_rand($images, 1);
$src = $images[$rand_key];
echo "<img class=\"flickrphoto\" src='".$src."' align='absmiddle'>";
} else {
    echo 'Error';
} ?>

and in your css somthing like this:

img.flickrphoto {
    max-width: 100px;
    max-height: 100px;
    overflow: hidden;
}
img.flickrphoto.portrait {
    max-width: 50px;
}

---

Here is a good article on how to maintain aspect ratio with CSS and HTML:

http://haslayout.net/css-tuts/CSS-Proportional-Image-Scale

Also, there is a SO question that gives a couple ideas on how to do this as well:

HTML - display an image as large as possible while preserving aspect ratio

Basically, you need to scale either height or width but not both.

---

display them as background of a <div> instead of <img>

like this:

echo "<div class=\"flickrphoto\" style='background: url(".$src.");'></div>";

---

use php functions imagesx and imagesy, and emit the return values as the width and height attributes of the image tag.