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

问题

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!

回答1:

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;
}

来源：https://stackoverflow.com/questions/27348610/how-to-correctly-show-an-image-in-portrait-mode-in-html