CSS：使用 -*-transform: 旋转。对齐问题
对于我的 HTML 图片查看器，我尝试自动旋转一些我的图片通过 CSS -*-transform:rotate （90 度）。由于图片的宽度大于高度，img 元素太小，旋转后的图片覆盖了上下的一些文字。
为了解决/解决此问题，我在其周围创建了一个具有预期大小的 div 。这导致了另一个问题，即图像现在也丢失了。为了解决/解决第二个问题，我在它周围创建了第二个 div 来修复错误的位置。
一个示例（在线：此处）：
- 图片的大小为 w =1024，h=768。
- 我将其旋转 90 度。
- 外部
div： - 内部
div：
这会产生正确/预期/想要的定位和对齐。
我想知道是否有更优雅/更干净的方法来做到这一点。
For my HTML picture viewer, I tried to autorotate some of my pictures via CSS -*-transform: rotate (by 90 degree). Because the width was bigger than the height of the pictures, the img element was too small and the rotated picture overlaid some of the text above and below.
To fix/workaround this issue, I created a div around it with the expected size. This lead to another problem that the image was also misplaced now. To fix/workaround this second issue, I created a second div around it which fixed the bad position.
One example (online: here):
- The picture has size w=1024, h=768.
- I am rotating it by 90 degree.
- The outer
div:<div style="display:block; width:768px; height:1024px;"> - The inner
div:<div style="position:relative; left:-128px; top:128px; display:block;">
This results in the correct / expected / wanted positioning and alignment.
I wonder though if there is more elegant / cleaner way to do this.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
尝试删除两个 div，并为您的 img 设置边距：
它应该可以工作，并且更干净一些。
PS：128就是(1024-768)/2。
Try removing both divs, and setting a margin to your img:
It should work, and it's a bit cleaner.
Ps: 128 is (1024-768)/2.