How can show image in proper orientation, Landscape or portrait

Question

I am having a file input control on the page to select an image. When user selects an image, I am showing image on the page.

But my problem is, when user selects a vertical or portrait image it is displayed in landscape mode.

So, how can I detect image orientation & apply proper css to show in Landscape or Portrait view.

Answer 1

Step #1:

Check if the image's width is bigger than its heigth. Then you'll figure out that the image is a landscape image. You can check it quickly using javascript.

Step #2:

Create a CSS and apply it using a class (apply the class using javascript) for whatever orientation you need.