Question

I’m working on a photo sharing site. When displaying an image in full size I want the width to be of maximum 800px, as well as the height to be of maximum 600.

The code below works for scaling, but it doesn’t keep the image’s proportions. I guess I could use percentage instead, but I still want the image to have these specific maximum values (h: 800, w: 600).

Is there a way of accomplishing that with jQuery?

Thanks in advance!

    if ($('#photo').length > 0) {
        var imgWidth = $("#photo").width();
        var imgHeight = $("#photo").height();

        if (imgWidth > 800) {
            $("#photo").width(800);
        }
        if (imgHeight > 600) {
            $("#photo").height(600);
        }
    }

Answer 1

you could use
max-width or max-height