时间戳

首页 > 解决方案 > 如何在 CSS/html 中旋转图像

html - 如何在 CSS/html 中旋转图像

问题描述

在我的网站上，我有一个画廊，里面有我和我女朋友的一些照片，但有两张照片是倒置的。我不知道为什么。其他照片都很完美。每张照片都是由同一个 iPhone 7+ 拍摄的，但前两张照片在网站上是颠倒的。在我的电脑上，它们完美显示。

这是网站：www.selinaundleon.com/gallery.html 有人可以帮我解决这个问题吗？非常感谢。

标签： htmlcssimage

解决方案

您可以使用以下方法创建一个类并将其附加到<img>要旋转的图像（元素）transform：

.rotate-180 {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
}
<img src="https://placehold.it/100x100" width="100"/>
<img class="rotate-180" src="https://placehold.it/100x100" width="100"/>

注意：我建议使用您选择的图像软件重新保存旋转的图像。

推荐阅读