如何在html中以纵向模式正确显示图像？ [英] How to correctly show an image in portrait mode in html?

问题描述

我在我的网站上使用了一些简单的照片，其中一些是横向模式，另一些是纵向模式。我使用最基本的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">

当我访问网址时（ / doc / 54836abcc1a36b7526daa146 ）直接在浏览器中我正确地将图像看作是站立/纵向模式，但是当我在html img-tag中使用它时，它以横向模式显示。这是因为我没有使用扩展名（例如： .jpg ）。或者是其他错误？

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!

推荐答案

使用CSS可以旋转或缩放图像，以横向或纵向方式查看图像。以下是示例：

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

将图像旋转90度：

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

缩放图片：

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

这篇关于如何在html中以纵向模式正确显示图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！