How to rotate image in CSS/html

Question

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.

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

Open in an image editor and re-save. The metadata is confusing the browser (the image is saved upside-down and the metadata says so, but the browser doesn't always like it) — Niet the Dark Absol, May 12 '18 at 21:03

Sebastian Brosch · Accepted Answer · 2019-03-21T07:11:29.323

3

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.

edited Mar 21 '19 at 07:11

answered May 12 '18 at 21:05

Sebastian Brosch

42,106
15
72
87

Thanks, but the picture doesn't rotate anyway in my case. – fechy May 12 '18 at 21:13
transform on inline element should not work ... but for image it does – Temani Afif May 12 '18 at 21:13

How to rotate image in CSS/html

1 Answers1

Linked