Question

在Web应用程序中使用引导传送带3.3.4。包括垂直（人像）在内的所有照片在桌面浏览器上均显示为水平，但在移动浏览器上显示为正确。

这似乎仅发生在从手机图库上传的照片是用相机拍摄的实际照片。

与this question相同，但仅在使用手机相机拍摄照片时才在桌面上出现该问题。

这是我正在使用的代码：

<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数据。我使用了this代码。

桌面上的引导轮播将图像旋转到水平

1 个答案: