Limit image by height AND width

Question

I am having issues limiting my images by either width or height, whichever passes the limit.

Some images I upload are taller than 450px for example, while others are wider than 450px. How can I set them so both width and height won't go over 450px.

This is such a basic thing but I don't know how to do it, I appreciate any help!

EDIT: I was hoping this could be solved with css html, that's why I didn't mention language, but if it's a more complex solution, then I am using meteor.. so javascript and jquery.

Answer 1

Use the max-width and max-height css properties (and do not set width/height attributes on the img tag)

img{
    max-width:450px;
    max-height:450px;
}

keep in mind that this applies when displaying the images. If you want to limit the real width/height of the image to conserve space on the server you will have to look to uploading plugins with options for scaling down an image.