Mi página muestra archivos de Azure Storage, algunos de los cuales están en orientación horizontal mientras que otros están en posición vertical. Mi problema es que todos los archivos se muestran como paisaje. Al principio, simplemente traté de agregar el siguiente css:

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

Pero parece que CSS está en desuso/no funciona en Edge y Chrome.

Luego traté de usar JavaScript-Load-Image de blueimp. Que está funcionando para mostrar la imagen, pero la orientación no cambia, todavía se muestran en formato horizontal.

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>

Cómo se ven las imágenes ahora (la primera y la segunda deben ser retratos):