HTML如何垂直显示水平图像？答案

【问题标题】：How HTML can show Horizontal image vertically?HTML如何垂直显示水平图像？
【发布时间】：2018-07-17 19:45:47
【问题描述】：

HTML 水平图像垂直显示。如果您在浏览器中打开图像链接，您可以在水平模式下看到它，原来它是水平的。如何以水平格式显示此图像？

&lt;img src="https://www.vsss.co.in/Admin/uploads/794489/20180630_194239.jpg"&gt;

【问题讨论】：

如果你不能使用变换，你能更精确吗？
欢迎来到 Stack Overflow！请澄清您的具体问题或添加其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。
人们已经用有效的解决方案回答了您的问题。如果它对您不起作用，您需要在问题中提供更多详细信息，说明它为什么不起作用以及您的图像是如何渲染的——您不能只问一个关于如何旋转图像并在何时击落所有人的问题他们提供的答案不符合您的隐藏要求

标签： html css

【解决方案1】：

试试这个：

img {
  transform: rotate(90deg);
}

&lt;img src="https://www.vsss.co.in/Admin/uploads/794489/20180630_194239.jpg"&gt;

【讨论】：

我不能使用变换方法图像是动态的。请给我另一种选择来处理这个问题。
@ShahRushabh 我没有正确理解你。这里的动态是什么意思。正确解释。
动态意味着从 PHP 加载。有的大宽小高有的小宽大高。

【解决方案2】：

使用变换但你需要调整原点并添加一些翻译：

img {
  transform:rotate(90deg) translateY(-100%);
  transform-origin:top left;
}

&lt;img src="https://www.vsss.co.in/Admin/uploads/794489/20180630_194239.jpg"&gt;

或者：

img {
  transform:rotate(-90deg) translateX(-100%);
  transform-origin:top left;
}

&lt;img src="https://www.vsss.co.in/Admin/uploads/794489/20180630_194239.jpg"&gt;

【讨论】：

【解决方案3】：

使用transform将图片旋转90 degree

.img {
  transform: rotate(90deg);
  margin-left: 10%;
}

<img src="https://www.vsss.co.in/Admin/uploads/794489/20180630_194239.jpg">
<hr>
<img src="https://www.vsss.co.in/Admin/uploads/794489/20180630_194239.jpg" class="img">

【讨论】：

我不能使用变换方法图像是动态的。请给我另一种选择来处理这个问题。
这就是为什么你应该使用类来水平显示你需要的图像。

【解决方案4】：

使用这个：

img {
transform: rotate(90deg);
margin-left: 20%;
}

&lt;img src="https://www.vsss.co.in/Admin/uploads/794489/20180630_194239.jpg"&gt;

【讨论】：

我不能使用变换方法图像是动态的。请给我另一种选择来处理这个问题。
stackoverflow.com/questions/31090542/… - 看看这个！它有望解决您的问题。