My page is displaying files from azure storage, some of which are in a landscape orientation while others are in portrait. My issue is that all of the files are displaying as landscape. At first I simply tried to add the following css:

.photo{
    image-orientation: from-image;
}

But it seems like that css is deprecated/doesn't work on edge and chrome.

Next I tried to use blueimp's JavaScript-Load-Image. Which is working to show the image, but the orientation isn't changing - they are all still showing in landscape.

JavaScript:

function RotateImage(fileURL) {
    var loadingImage = loadImage(
        fileURL,
        function (img) {
            document.body.appendChild(img)
        },
        { orientation: true }
    )

    return loadingImage;
}

HTML:

<div class="photosGridDiv">
    @foreach (var file in currentFiles)
    {
        <div>
            @(JSRuntime.InvokeAsync<object>("RotateImage", file.filePath))
            <br />
            <a href="@file.filePath">@file.fileName</a>
        </div>
    }
</div>

How the images look now (the first and second should be portrait):