CSS：使用-*-transform：旋转。对齐问题

Question

对于我的HTML picture viewer，我尝试通过 CSS -*-transform: rotate 自动旋转我的一些图片（90 度）。由于图片的宽度大于高度，img 元素太小，旋转后的图片覆盖了上下部分文字。

为了修复/解决这个问题，我在它周围创建了一个具有预期大小的div。这导致了另一个问题，即图像现在也放错了位置。为了修复/解决第二个问题，我在它周围创建了第二个div，它修复了错误的位置。

一个例子（在线：here）：

• 图片大小为 w=1024，h=768。
• 我正在将它旋转 90 度。
• 外层div:<div style="display:block; width:768px; height:1024px;">
• 内div:<div style="position:relative; left:-128px; top:128px; display:block;">

这会导致正确/预期/想要的定位和对齐。

我想知道是否有更优雅/更清洁的方法来做到这一点。

Answer 1

尝试删除两个 div，并为您的 img 设置边距：

margin:128px -128px;

它应该可以工作，而且它更干净一些。

Ps：128 是 (1024-768)/2。