How to correctly show an image in portrait mode in html?

Question

I'm using some simple photos on my website of which some are in landscape mode, and others in portrait mode. I use the most basic html possible:

<img src="/doc/54836abcc1a36b7526daa146">

When I visit the url (/doc/54836abcc1a36b7526daa146) directly in the browser I correctly see the image as standing/portrait mode, but when I use it in the html img-tag, it displays in landscape mode. Is this because I don't use an extension (like e.g.: .jpg). Or is something else wrong?

Does anybody know how I can correctly display the image in portrait mode? All tips are welcome!

when you visit the url, view page source on your page; anyhow you can use width *or* height in your tag for resize image and preserve ratio. — Alessandro Marchisio, Dec 07 '14 at 22:34

score 2 · Answer 1 · answered Dec 07 '14 at 23:29

Using CSS you can rotate or scale the image to view it in landscape or portrait. Here are examples:

Rotate the image 90 degrees:

img {
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
}

Scale the image:

img {
height: 100px;
width: 200px;
}

How to correctly show an image in portrait mode in html?

1 Answers1

Linked