Изображения повернуты в горизонтальное положение с помощью загрузочной карусели на рабочем столе

Question

Использование начальной загрузки 3.3.4 в веб-приложении. Все фотографии, включая вертикальные (портретные), отображаются в браузере на рабочем столе горизонтально, но в мобильных браузерах отображаются правильно.

Кажется, что это происходит только с фотографиями, загруженными из телефонной галереи, которые были реальными фотографиями, снятыми камерой.

Та же проблема, что и в этом вопросе , но имеет место только на рабочем столе, когда фотография была сделана на камеру телефона.

Это код, который я использую:

<div id="carousel-gallery" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        @for (int i = 0; i < Model.Pictures.Count; i++)
        {
        <li data-target="#carousel-gallery" data-slide-to="@i"></li>
        }
    </ol>

    <div class="carousel-inner" role="listbox">
        @for (int i = 0; i < Model.Pictures.Count; i++)
        {
        <div class="item @(i == 0 ? " active" : "" )">
            <img style=" margin-left: auto; margin-right: auto;" alt="" src="@Model.Pictures[i].Url" data-holder-rendered="true">
        </div>
        }
    </div>

    <a class="left carousel-control" href="#carousel-gallery" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">[[[Previous]]]</span>
    </a>
    <a class="right carousel-control" href="#carousel-gallery" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">[[[Next]]]</span>
    </a>

</div>

Как сделать так, чтобы изображения правильно отображались при загрузке?

Answer 1

Я должен был принять во внимание, что данные телефонов exif могут испортить это. Я посмотрел на exif ориентацию при загрузке изображения, а затем повернул в соответствии с этим. Затем удалил данные exif. Я использовал этот код.