How to show the image in the correct orientation, landscape or portrait

Question

I have a file entry control on a page to select an image. When the user selects an image, I display the image on the page.

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

So, how can I determine the orientation of the image and apply the correct CSS to display in landscape or portrait view.

Answer 1

Step 1:

Make sure the image is wider than its height. Then you will realize that the image is a landscape image. You can quickly check it using javascript.

Step # 2:

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