Почему переворачивается фото?

Question

[Алексей Максимов]

При вёрстке галереи на сайте столкнулся с проблемой, что некоторые длинные (по высоте) изображения самопроизвольно переворачиваются на бок в некоторых браузерах. Как это исправить?

<div id="photo-block"><img src="./assets/img/gallery/album_4/photo_2.jpg" alt="" class="photo" id="photo"></div>

.dialog .photo-block {
  position: relative;
  padding-top: 35px;
  height: 655px;
  width: 980px;
  background-color: #fff;
  z-index: 4;
  margin: 0px 114px 40px 83px;
}
.photo {
  display: block;
  margin: 0 auto;
  max-width: 960px;
  height: 640px;
}

Кому интересно понаблюдать вживую:
rade-games.com/lt
Альбом МЕЖКОМНАТНЫЕ АРКИ И ПОРТАЛЫ ДЛЯ ОТКРЫТЫХ ПРОЁМОВ примерно фоток 10 назад пролистайте и увидите.

Comments

[gassmonkey]

Живой пример в студию.

[Алексей Максимов]

gassmonkey: rade-games.com/lt
Альбом МЕЖКОМНАТНЫЕ АРКИ И ПОРТАЛЫ ДЛЯ ОТКРЫТЫХ ПРОЁМОВ примерно фоток 10 назад пролистайте и увидите.

Answer 1

[g_s_e]

Html перевернутой фотки:

<img src="./assets/img/gallery/album_1/photo_28.jpg" alt="" class="photo rotate_90" id="photo" style="max-width: 960px;">

Html не перевернутой фотки:

<img src="./assets/img/gallery/album_1/photo_28.jpg" alt="" class="photo" id="photo" style="max-width: 960px;">

Думаю, что проблема в том, что JSом слайдера добавляется класс "rotate_90"

Comments

[Алексей Максимов]

Не, это костыль. Уже не актуально.

[g_s_e]

Алексей Максимов: для полноты картины малоинфы, я частично просмотрел этот скрипт
var max_reviews_page = 3;
var max_album_photos = [];
max_album_photos[4] = 57;
max_album_photos[1] = 38;
max_album_photos[2] = 13;
max_album_photos[3] = 82;
//
var slide_active = 1;
var slide_timer = 0;
var slide_opacity = [];
var reviews_page = 1;
var page_opacity = 0;
var photo_id = 1;
var select_album = 0;
var load_image = 0;

var menu_block = document.getElementById('menu-block');
var menu_SourceBottom = menu_block.getBoundingClientRect().bottom + window.pageYOffset;

function slide_next(slide)
{
if (slide == slide_active) return 1;
var old_slide = slide_active;
if (slide == 0)
{
if (slide_active == 5) slide_active = 1;
else slide_active++;
}
else slide_active = slide;
document.getElementById('switch-'+old_slide+'').classList.remove('switch-active');
document.getElementById('switch-'+slide_active+'').classList.add('switch-active');
slide_opacity[old_slide] = 100;
slide_opacity[slide_active] = 0;
setTimeout("set_opacity("+old_slide+", "+slide_active+")", 10);
clearInterval(slide_timer);
slide_timer = setInterval("slide_next(0)", 5000);
}

function set_opacity(old_slide, new_slide)
{
slide_opacity[old_slide]--;
slide_opacity[slide_active]++;
document.getElementById("slide-"+old_slide+"").style.opacity = slide_opacity[old_slide]/100;
document.getElementById("slide-"+slide_active+"").style.opacity = slide_opacity[slide_active]/100;
if (slide_opacity[old_slide] != 0 && slide_opacity[slide_active] != 100) setTimeout("set_opacity("+old_slide+", "+slide_active+")", 10);
}

function service_hover(service_id)
{
document.getElementById("service-"+service_id+"-icon").src = "./assets/img/service_"+service_id+"_hover.png";
document.getElementById("service-"+service_id+"-circle").style.backgroundColor = "#c09e7b";
document.getElementById("service-"+service_id+"-name").style.textDecoration = "underline";
}.......

тут полный мрак, но если действовать в рамках костыля с классом "rotate_90", то через дебаггер, можно повернуть фотку в нормальное положение достаточно в стилькласса добавить св-во transform: rotate(270deg);