Question

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

(H, W, C)

Answer 1

尝试一下：

img {
  transform: rotate(90deg);
}

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

Answer 2

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

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

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

或者：

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

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

Answer 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">

Answer 4

使用此：

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

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

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

4 个答案: