如何在不重叠的情况下旋转图片？

Question

如何在不重叠的情况下旋转图片？

5

我想在我的HTML文件中读取Exif信息并旋转它们。我已经按照以下方式操作，可以很好地旋转图片，但当涉及两张或更多照片时，它们不能给我的图片足够的空间。我能否让它们不重叠并旋转它们？

<HTML><HEAD>
<style type="text/css">
DIV.rotate {
-webkit-transform:rotate(30deg);
}</style>
</HEAD><BODY>
<div><p><DIV class="rotate"><img 
src="http://taufanlubis.files.wordpress.com/2008/05/google-picasa01.png">
</p></div>
<div><p><DIV class="rotate"><img 
src="http://taufanlubis.files.wordpress.com/2008/05/google-picasa01.png">
</p></div>
<div><p><DIV class="rotate"><img 
src="http://taufanlubis.files.wordpress.com/2008/05/google-picasa01.png">
</p></div>
</BODY></HTML>

非常感谢你。

- AmyWuGo

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Libin · Accepted Answer

2

你可以指定一个与图片宽度几乎相同的 height 来设置区块的高度。

这里有演示

或者你可以为区块指定一个 margin-bottom。

这里有演示

祝好运！

- Libin

谢谢你，Libin，这很完美。我能再问一个问题吗？因为在插入图片后，用户可能会插入另一张大小不同或带有文本的图片。我尝试在旋转图片后插入文本，但文本被图片重叠了，有没有什么办法可以避免这种情况？非常感谢。 - AmyWuGo

在这种情况下，您需要使用JavaScript查找图像的高度并在JavaScript中更改CSS高度。 - Libin

在我看来，添加高度或底部边距似乎是一种hack的解决方案。这些解决方案无法进行扩展。必须有更好的方法，以便在不同媒体尺寸上保护可扩展性。 - Joshua Robison