Question: How to maintain aspect ratio of image thumbnail so they don't look squashed?

```
  protected function DisplayPhoto($Sender) {
        $body = $Sender->EventArguments['Discussion']->Body;
        preg_match('#\<img(.+?)src=(.+?)\>#s', $body, $matches);
              if(isset($matches[2])){
                    $image = "src=" . $matches[2];
                    echo '<img class="ProfilePhotoSmall"' . $image . '>';
              }else{
                    //do what you want
              }       
  }

```

Here is the CSS.

```
ul.Discussions li img {
height: 60px;
width: 110px;
padding: 0 6px 0 4px;
float: right;
position: relative;
}

.Discussion.ItemContent {
padding-right: 0px;
padding-bottom: 10px;
display: inline;
}

```

Answer: 
Instead of specifying both a `width` and `height` rule in CSS, simply specify one of them (which one will depend upon the way you want the scaling). The omission of one will have the browser maintain the aspect ratio:

```
ul.Discussions li img {
    width: 110px;
    padding: 0 6px 0 4px;
    float: right;
    position: relative;
}

```

The above code will resize the image to a width of `110px`, and the height will be automatically calculated by the browser.
I don't see you changing image size, but the logic will be something like this:

Let's say you have an image of `300px width` and `150px height`.  

Find the ratio, which is `2` here. And when you give a new width to the image, example `250px`.  

Divide `250px/2` to find the corresponding height. New width is `250px` and height is `125px`. 

It is just a basic logic to give you a hint 

***Note that you can't resize of images by CSS, it will just resize it for the user. It will load a bigger image than it needs***