旋转图像并将其粘贴到左上角答案

【问题标题】：Rotate image and stick it to top left corner旋转图像并将其粘贴到左上角
【发布时间】：2015-03-27 21:20:05
【问题描述】：

我有一个简单的 html 标记，其中只有一个 img 标记

<html>
    <head>
    </head>
    <body>
        <img src="img1.jpg"/>
    </body>
</html>

图片宽度为 800 像素，高度为 1400 像素。所以它是纵向的，我需要旋转它并将它贴在页面的左上角。另外，由于现在宽度为 1400 像素，如果可能的话，我需要将其限制为 A4 页面的 100%

【问题讨论】：

首先，A4 页面的 html 尺寸以 cm 为单位，body css 需要设置为相同而不是 px 以确保准确性。其次，您可能不需要旋转图像（我假设您想要这个用于平板电脑或打印）请参阅stackoverflow.com/questions/3858466/…
您还需要图像用于其他用途吗？我建议使用图像编辑器或绘画或其他东西旋转它，然后导入和使用图像......而不是浪费资源使用 CSS 旋转图像。然后，您可以将其绝对定位在 100% 宽的 div 中，并使其最大宽度为 100%。
对此的用例感到好奇......这似乎是一种奇怪的方式。为什么不直接编辑图片？
如果您可以使用 Windows Photo Viewer 或任何图形编辑程序，为什么不旋转其中的图像并省去麻烦？

标签： html css

【解决方案1】：

在您的情况下编辑实际的图像文件可能更有意义，但是您可以使用 CSS3 转换属性来旋转元素。要将其放在页面顶部，您可以使用负上边距。要使其更靠近页面右侧，请使用正的左边距。

img{ 
    transform:rotate(90deg);
    margin-top:-300px;
    margin-left:300px;
}

【讨论】：