Resizing images to fit smaller browsers

Question

I've been searching the questions here for weeks and haven't found an answer to this, so here it goes:

I created a fairly large image (800x1000px) to be displayed in the center of my site. I made it so large with large screen resolutions in mind but I've been using the CSS max-width: 100%; max-height: 100%; max-width: 100%; max-height: 100%; to have it resize proportionally to fit on computers with smaller screen resolutions as well. (keep in mind this is not a "background" image)

However, what I'd really like, is for the image to resize only when keeping it at the current size would create a horizontal scrolling bar in the user's browser. However, if it will only make a vertical scrolling bar , I'd like it to not resize the image, that way it can be as large as possible (the reason being that I feel a horizontal scroll is less professional looking than a vertical scroll as most sites have a vertical scroll anyway).

Is there a way to accomplish this with CSS or will I need Javascript? And if I'll need javascript please spell out the code as I have absolutely no experience with javascript, thanks!

Answer 1

Just remove max-height: 100% , leaving only the max-width: 100% .

Demo

Answer 2

img {
    max-width: 100%;
    height: auto;
}