旋转图像并将其粘贴到左上角
Posted
技术标签:
【中文标题】旋转图像并将其粘贴到左上角【英文标题】：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 以确保准确性。其次，您可能不需要旋转图像（我假设您想要这个用于平板电脑或打印）请参阅***.com/questions/3858466/… 您还需要图像用于其他用途吗？我建议使用图像编辑器或绘画或其他东西旋转它，然后导入和使用图像......而不是浪费资源使用 CSS 旋转图像。然后，您可以将其绝对定位在 100% 宽的 div 中，并使其最大宽度为 100%。 对此的用例感到好奇......这似乎是一种奇怪的方式。为什么不直接编辑图片？ 如果您可以使用 Windows Photo Viewer 或任何图形编辑程序，为什么不旋转其中的图像并省去麻烦？ 【参考方案1】：在您的情况下编辑实际的图像文件可能更有意义，但是您可以使用 CSS3 转换属性来旋转元素。要将其放在页面顶部，您可以使用负上边距。要使其更靠近页面右侧，请使用正的左边距。
img
transform:rotate(90deg);
margin-top:-300px;
margin-left:300px;
【讨论】：
以上是关于旋转图像并将其粘贴到左上角的主要内容，如果未能解决你的问题，请参考以下文章