如何在CSS/html中旋转图像 [英] How to rotate image in CSS/html

问题描述

在我的网站上，我有一个画廊，上面有一些我和我的女友的照片，但有两张照片倒置显示. 而且我不知道为什么.所有其他照片都是完美的. 每张照片都是由同一部iPhone 7+拍摄的，但前两张照片在网站上是上下颠倒的.在我的计算机上，它们可以完美显示.

on my website I have a gallery with some pics of my girlfriend and me, but there are two pics that are displayed upside down. And I don't know why. All other pics are perfect. Every picture is shot by the same iPhone 7+ but first two pictures are upside down on the website. On my computer they are displayed perfectly.

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

Here is the Website: www.selinaundleon.com/gallery.html Can someone help me with this problem? Thank you very much.

推荐答案

您可以使用

You can create and attach a class to the images (<img> elements) to rotate, using 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"/>

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

Note: I recommend to resave the images rotated with a image software of your choice.

这篇关于如何在CSS/html中旋转图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！