Как повернуть изображение в CSS / HTML

Question

на моем сайте у меня есть галерея с некоторыми фотографиями моей подруги и меня, но есть два изображения, которые отображаются вверх ногами. И я не знаю почему. Все остальные картинки идеальны. Каждое изображение снято одним и тем же iPhone 7+, но первые две картинки на сайте перевернуты. На моем компьютере они отображаются отлично.

Вот сайт: www.selinaundleon.com/gallery.html Может кто-нибудь помочь мне с этой проблемой? Большое спасибо.

Answer 1

Вы можете создать и прикрепить класс к изображениям (<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"/>

Примечание: Рекомендую повторно сохранять изображения, повернутые с помощью программного обеспечения для обработки изображений по вашему выбору.