How to load image in specific orientation in Visual Studio?

Question

I am trying to add image to my ASP.Net Web Form, but the image loads sideways instead of upwards.

Here is the .aspx-code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Kuva.aspx.cs" Inherits="Kuva.Kuva" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Image ID="Image1" runat="server" Height="235px" ImageUrl="~/App_Data/WP_20141225_21_42_13_Rich.jpg" Width="246px" />
        </div>
    </form>
</body>
</html>

And here a picture of the wrong image orientation:

Original picture has the guitars facing upwards, but for some reason Visual Studio loads the image sideways. How do I change the orientation so that the guitars are pointing upwards?

Is there any built-in solution for this or do I need to use C# on the CodeBehind-file for this to happen?

I looked around for anyone having the same problem, but the other image rotation questions here were how to rotate image on button click or event.

If it's loading it that way, that means it *is* that way (unless you have some CSS you haven't shared). Have you considered just rotating the image and re-saving? — itsme86, Jun 21 '19 at 15:02
Most likely is that the image is in that orientation, and the software you normally use to view the image is using meta-data contained in the image to rotate it correctly. You need to detect if the image has that rotation meta-data (have a look at [this question](https://stackoverflow.com/questions/27835064/get-image-orientation-and-rotate-as-per-orientation) or [this question](https://stackoverflow.com/questions/19306564/correcting-image-orientation-server-side-in-vb-net)) and rotate/save it appropriately — freefaller, Jun 21 '19 at 15:05
See: [PropertyTagOrientation](https://learn.microsoft.com/en-us/windows/desktop/gdiplus/-gdiplus-constant-property-item-descriptions#propertytagorientation) and [PropertyItem Class](https://learn.microsoft.com/en-us/dotnet/api/system.drawing.imaging.propertyitem) (the [PropertyItem.Id](https://learn.microsoft.com/en-us/dotnet/api/system.drawing.imaging.propertyitem.id) is of course the same). It's up to you to rotate the image as specified (you're the *viewer*). Note that the Exif Orientation may get lost, it depends on how your're loading/handling/converting the image. — Jimi, Jun 21 '19 at 15:14
Ok, I found out using https://exifdata.com/index.php that the Orientation data is: **Rotate 90 CW**. But I also managed to change the orientation with a tool from this site: https://convertimage.net/photo-size-editing-tools/online-picture-rotate-tool.asp. I always use Windows photo viewer to rotate the picture if they are wrong, but apparently the photo viewer does not change the original orientation data. — K4R1, Jun 21 '19 at 15:33

score 1 · Accepted Answer · answered Jun 21 '19 at 15:53

As suggested in comments you can just rotate the local picture, but to do it with CSS:

Add a CSS style (place in head tag):

<style type="text/css">
.rotate90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
</style>

And then

<asp:Image ID="Image1" runat="server" Height="235px" ImageUrl="~/App_Data/WP_20141225_21_42_13_Rich.jpg" Width="246px" class="rotate90" />

Reference: Rotate an image in image source in html

As I mentioned in my previous comment, I managed to solve this differently (more work, but less code). But I'll accept this as an anwer since it would too much hassle to convert all my pictures with that website tool I mentioned. Using CSS class makes this alot faster. — K4R1, Jun 21 '19 at 16:17

How to load image in specific orientation in Visual Studio?

1 Answers1