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.