Prevent a tall image from displaying horizontally

Question

I am trying to use this image in an HTML document. If you look at the image, you can clearly see that it is supposed to be a tall image, but when I try to put it in an <img> tag, it sets it on its side for no reason:

.side-image {
    width: 225px;
    margin: 6px;
    float: left;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/f/f1/Monastir89.jpg" class="side-image" />

How do I prevent this from happening?

score 0 · Answer 1 · answered Apr 06 '20 at 00:58

One possible way to get the functionality you want is with transform: rotate(90deg);

It looks like the problem you're having is from the exif data of the image. You could try saving the image and uploading it somewhere else after putting it through an image editor.

Prevent a tall image from displaying horizontally

1 Answers1